<template>
  <div class="box">
    <div class="top">
      <div class="point_box" :class="{ point_box2: screenWidth < 1920, dark_point_box: isDark }">
        <div class="point_box_left">
          <div class="title">安全生产已达 {{ state.safetyDays }} 天</div>
          <div class="search_box">
            <el-input v-model="state.eventGlobalValue" style="width: 76%; height: 35px" prefix-icon="Search"
              placeholder="请输入关键词" />
            <el-button type="primary" class="globalFontSize" style="width: 22%; height: 35px" @click="eventGlobalclick">
              查询</el-button>
          </div>
        </div>
        <div class="data_show globalFontSize">
          <div class="items hover" @click="shouyeToList(item.type)" v-for="item in state.topDataFourList"
            :key="item.type">
            <svg-icon style="font-size: 83px" :icon-class="item.icon" />
            <div class="items_num">
              <div>{{ item.label }}</div>
              <div style="font-size: 28px; font-weight: 700" :style="{
                  fontSize: pagesStore.sizeNum * 2 + 'px',
                  color: item.color,
                }">
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="quick" :class="{ qeuick2: screenWidth < 1920, dark_quick: isDark }">
        <div class="quick_head" ref="useMenuRef" style="position: relative">
          <div class="title" :style="{ fontSize: pagesStore.sizeNum + 2 + 'px' }">
            <svg-icon icon-class="biaotitubiao" />
            <div>常用</div>
          </div>
          <svg-icon icon-class="shezhi" @click="usemenuClick" />
          <carduseCom modTitle="常用菜单" style="
              position: absolute;
              top: 20px;
              left: 0;
              right: 0;
              z-index: 10;
              height: 300px;
              overflow-y: auto;
            " v-if="state.usemenuShow" @carduseClick="carduseClick" :resultArray="resultArray"></carduseCom>
        </div>
        <div class="quick_box">
          <div class="items globalFontSize" v-for="item in resultArray" @click="resultArrayClick(item)">
            <div class="img" v-if="item.meta">
              <svg-icon :icon-class="item.meta.icon" />
            </div>
            <div v-if="item.meta">{{ item.meta.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" :class="{ dark_bottom: isDark }">
      <div class="zk_btn" v-if="hideStation" @click="hideStation = false">
        <el-icon color="#fff">
          <ArrowRightBold />
        </el-icon>
      </div>
      <Transition>
        <div class="substation" :class="{ substation2: screenWidth < 1920 }" v-if="!hideStation">
          <div class="substation_head">
            <div class="title" :style="{ fontSize: pagesStore.sizeNum + 2 + 'px' }">
              <svg-icon icon-class="biaotitubiao" />
              <div>分站</div>
              <div style="font-size: 14px; font-weight: 400" :style="{ fontSize: pagesStore.sizeNum + 'px' }">
                共 {{ stationData.length }} 条记录
              </div>
            </div>
            <svg-icon icon-class="shouqi" @click="hiddenStation" />
          </div>
          <div class="line"></div>
          <div class="select_box">
            <el-select v-model="formData1.stationPlaceName" @change="searchFn" clearable placeholder="请选择"
              style="width: 100%">
              <el-option v-for="item in areaData" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="table">
            <el-table ref="table1" :data="stationData" @row-click="cancelChange" class="tableFontSize"
              header-row-class-name="header" :header-cell-class-name="headerCellStyle" style="  width: 100%;
                height: calc(100%);" :style="{
                '--el-table-row-hover-bg-color': hoverBg}" :header-row-style="{
                backgroundColor: isDark ? '#2b5477' : 'rgba(68, 136, 255, .12)',
              }" :row-style="rowStyleleft" @cell-mouse-enter="cellmouseenter">
              <el-table-column :width="50" show-overflow-tooltip prop="stationCode" label="编号" />
              <el-table-column show-overflow-tooltip prop="stationPlaceName" label="安装地点" />
              <el-table-column :width="100" show-overflow-tooltip label="工作状态" prop="stationStatusName">
              </el-table-column>
              <el-table-column :width="70" show-overflow-tooltip label="匹配状态" prop="matchStatusName">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </Transition>
      <div class="pointInfo" :class="{ pointInfo2: screenWidth < 1920, pointInfo3: hideStation }">
        <div class="pointInfo_head">
          <div class="title" :style="{ fontSize: pagesStore.sizeNum + 2 + 'px' }">
            <svg-icon icon-class="biaotitubiao" />
            <div v-if="areaName">测点信息（{{ areaName }}）</div>
            <div v-else>测点信息</div>
          </div>
          <div class="btns globalFontSize">
            <div class="btn_item" style="width: 60px" :class="{ tabStyle: formData3.flag == 'B' }"
              @click="changTabs('B')">
              全部
            </div>
            <div class="btn_item" :class="{ tabStyle: formData3.flag == 'A' }" @click="changTabs('A')">
              模拟量
            </div>
            <div class="btn_item" :class="{ tabStyle: formData3.flag == 'D' }" @click="changTabs('D')">
              开关量
            </div>
            <div class="btn_item" :class="{ tabStyle: formData3.flag == 'S' }" @click="changTabs('S')">
              累计量
            </div>
            <div class="btn_item" :class="{ tabStyle: formData3.flag == 'V' }" @click="changTabs('V')">
              虚拟测点
            </div>
          </div>
          <div class="imgs">
            <el-popover placement="bottom">
              <span>最新更新时间:<br />
                <span v-if="alarmNum.latestTime==null">-</span>
                <span v-else>{{dayjs(alarmNum.latestTime).format("YYYY年MM月DD日")}}<br />
                  {{dayjs(alarmNum.latestTime).format("HH:mm:ss")}}</span></span>
              <template #reference>
                <svg-icon icon-class="quxianmonilianglishiquxian" />
              </template>
            </el-popover>
            <el-popover :width="220" placement="bottom">
              <el-input @blur="pointSearchBlur" v-model="state.pointSearch" placeholder="请输入安装地点、名称"
                suffix-icon="Search" style="width: 200px" />
              <template #reference>
                <svg-icon icon-class="sousuo" />
              </template>
            </el-popover>
          </div>
        </div>
        <div class="line" style="margin: 0 0 10px 0"></div>
        <div class="pointInfo_box">
          <el-table @header-dragend="headerDragendChange" :data="pointData.list" border :row-style="rowStyle" header-row-class-name="header" :style="{
                '--el-table-row-hover-bg-color': hoverBg1,
                '--primary-table-color': pagesStore.pageStyle.detectionBackgroundColor}"
            @cell-mouse-enter="cellmouseenter1" :header-cell-class-name="headerCellStyle" 
            class="table tableFontSize"
            :cell-class-name="cellClassName" @row-contextmenu="handleRightClick">
            <el-table-column show-overflow-tooltip v-for="item in tableHeads" :key="item" 
            :prop="item.field"
            :width="item.width"
              align="left" header-align="left" :label="item.title">
              <template #header="scope" v-if="item.field == 'sensorName'">
                <div style="display: flex; align-items: center">
                  <span>{{ item.title }}</span>
                  <el-popover placement="bottom" trigger="click">
                    <el-cascader clearable :teleported="false" class="w100" v-model="formData3.condition"
                      @change="elcascaderChange" :options="state.searchTreeList" :props="{
                        children: 'children',
                        value: 'name',
                        label: 'commonField',
                        emitPath: false,
                        checkStrictly: true,
                      }" />
                    <template #reference>
                      <svg-icon icon-class="shaixuan" />
                    </template>
                  </el-popover>
                </div>

              </template>
              <template #header="scope" v-if="item.field == 'status'">
                <div style="display: flex; align-items: center" v-if="item.field == 'status'">
                  <el-popover placement="bottom" trigger="click">
                    <span>{{ item.title }}</span>
                    <el-checkbox-group v-model="formData3.statusList">
                      <el-checkbox v-for="city in state.statusList" :key="city" :label="city" :value="city"
                        @change="statuscheckboxChange">
                        {{ city }}
                      </el-checkbox>
                    </el-checkbox-group>
                    <template #reference>
                      <span>
                        {{ item.title }}
                        <svg-icon icon-class="shaixuan" />
                      </span>
                    </template>
                  </el-popover>
                </div>
              </template>
              <template #default="{ row, column, $index }">
                <div v-if="item.field == 'pointId'">
                  <svg-icon v-if="$index == 0 || $index == 1 || $index == 2" icon-class="zhongyao" />
                  {{ row.pointId }}
                </div>
                <div v-if="row[item.field] == null && item.field != 'unit'">
                  -
                </div>
                <div v-if="item.field == 'unit' && row.statusMoment">
                  {{ row.statusMoment }}
                </div>
                <div v-if="
                    item.field == 'unit' &&
                    row.unit == null &&
                    row.statusMoment == null
                  ">
                  -
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            position: absolute;
            bottom: 20px;
            width: 100%;
          ">
          <div class="alarmNum">
            <div class="num">
              报警<span v-if="alarmNum.alarmNumber">{{
                alarmNum.alarmNumber
              }}</span>
              <span v-else>0</span>
            </div>
            <div class="num">
              离线<span v-if="alarmNum.offlineNumber">{{
                alarmNum.offlineNumber
              }}</span>
              <span v-else>0</span>
            </div>
          </div>
          <el-pagination :pager-count="3" class="pages globalFontSize" v-model:current-page="formData3.pageNum"
            v-model:page-size="formData3.pageSize" :page-sizes="[10, 20, 30, 40]" background
            layout="total, sizes, prev, pager, next, jumper" :total="pointData.total" @size-change="getPointData"
            @current-change="getPointData" />
        </div>
      </div>
      <div class="output" :class="{ output2: screenWidth < 1920 }">
        <div class="output_head">
          <div class="title" style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            " :style="{ fontSize: pagesStore.sizeNum + 2 + 'px' }">
            <span style="display: flex; align-items: center">
              <svg-icon icon-class="biaotitubiao" />
              <div>输出设备</div>
            </span>
            <el-select class="noBorderBox" @change="controlPortTypeChange" v-model="formData2.controlPortType"
              style="width: 80px">
              <el-option v-for="item in [
                  { label: '全部', value: undefined },
                  { label: '断电仪', value: 1 },
                  { label: '声光报警', value: 2 },
                ]" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <div class="line"></div>
        <div class="output_box">
          <div class="items globalFontSize" v-for="item in outPut" :key="item">
            <div class="items_name">
              <div>
                {{ item.controlPointId
                }}<span v-if="item.controlPortType != null" style="font-size: 12px">({{
                    item.controlPortType == 1 ? "断电仪" : "声光报警器"
                  }})</span>
              </div>
              <div class="state" :style="{color:item.controlPointStatusColor}">
                <div class="point" :style="{backgroundColor:item.controlPointStatusColor}"></div>
                {{ item.controlPointStatusName }}
              </div>
            </div>
            <div class="location">
              <div class="l_titile">
                <svg-icon icon-class="anzhuangdidian" />
                <!-- 安装地点 -->
                <div class="l_info" :title="item.controlPointPlaceName">
                  {{ item.controlPointPlaceName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右击级联下拉选 -->
    <el-cascader-panel @change="handleRightSelectChange" v-if="state.handleRightSelectShow" style="
        width: fit-content;
        position: fixed;
        z-index: 100;
        background-color: rgba(255, 255, 255, 0.9);
      " :style="{
        left: state.handleRightSelect.x + 'px',
        top: state.handleRightSelect.y + 'px',
      }" :options="handleRightList" :props="{
        emitPath: false,
        children: 'children',
        value: 'value',
        label: 'label',
      }" ref="cascaderRightRef" @mouseleave="handleRightSelectBlur" />
    <el-drawer v-model="state.handleRdrawerShow" direction="rtl" size="70%" 
    close-on-click-modal :modal="true" @close="closeChange">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>
            {{ state.handleRightSelectLabel }}
          </span>
        </h4>
      </template>
      <div v-if="
          state.handleRightSelectLabel == '图表' ||
          state.handleRightSelectLabel == '查询'
        ">
        <el-tabs v-model="state.handleRightTabValue" class="demo-tabs" @tab-click="handleRightTabClick">
          <el-tab-pane v-for="item in state.handleRightSelectList" :label="item.label" :name="item.label">
          </el-tab-pane>
        </el-tabs>
        <component v-if="state.fromIndexpointId" :is="state.handleRightSelectCom" 
        :fromIndexpointId="state.fromIndexpointId"
          :key="state.handleRightTabValue" />
      </div>
      <div v-else>
        <el-row :gutter="24">
          <el-col :span="14">
            <cardCom modTitle="" style="height:96%">
              <template v-slot:cardTitle>
                <div class="cardTitle">
                  <span class="title_item" :class="{ active_title: activeNum == 0 }"
                    @click="ponitactiveNameTabClick(0)">
                    基础信息
                  </span>
                  <span class="title_item" :class="{ active_title: activeNum == item.type }"
                    v-for="item in state.pointactiveNameList" :key="item.type"
                    @click="ponitactiveNameTabClick(item.type)">
                    <span v-if="state.baohanD=='D'">
                      <span v-if="state.fromIndexpointId.needGrandalarm">
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type==3&&state.fromIndexpointId.pointType ==1&&state.fromIndexpointId.isCut !=null">{{ item.name }}</span>
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type!=4&&state.fromIndexpointId.pointType ==1&&item.type!=3">{{ item.name }}</span>
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type!=4&&item.type!=2&&item.type!=3&&state.fromIndexpointId.pointType ==3">{{ item.name }}</span>
                      </span>
                      <span v-else>
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type==3&&state.fromIndexpointId.pointType ==1&&state.fromIndexpointId.isCut !=null">{{ item.name }}</span>
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type!=4 && item.type!=2&&state.fromIndexpointId.pointType ==1&&item.type!=3">{{ item.name }}</span>
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type!=4 && item.type!=2&&item.type!=3&&state.fromIndexpointId.pointType ==3">{{ item.name }}</span>
                      </span>
                    </span>
                    <span v-else>
                      <span v-if="state.fromIndexpointId.needGrandalarm">
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type==3&&state.fromIndexpointId.pointType ==1&&state.fromIndexpointId.isCut !=null">{{ item.name }}</span>
                        <span class="span" v-if="state.fromIndexpointId.pointType ==1&&item.type!=3"
                          :class="activeNum ==item.type ? 'active':''">{{ item.name }}</span>
                        <span class="span" v-if="state.fromIndexpointId.pointType ==3&&item.type==1&&item.type!=3"
                          :class="activeNum ==item.type ? 'active':''">{{ item.name }}</span>
                      </span>
                      <span v-else>
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type==3&&state.fromIndexpointId.pointType ==1&&state.fromIndexpointId.isCut !=null">{{ item.name }}</span>
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type!=2&&state.fromIndexpointId.pointType ==1&&item.type!=3">{{ item.name }}</span>
                        <span class="span" :class="activeNum ==item.type ? 'active':''"
                          v-if="item.type!=2&&item.type!=3&&item.type!=4&&state.fromIndexpointId.pointType ==3">{{ item.name }}</span>
                      </span>
                    </span>
                  </span>
                </div>
              </template>
              <template v-slot:cardContent>
                <div class="pointDescBox" v-if="activeNum == 0">
                  <el-row :gutter="20" class="el-drawer_mash">
                    <el-col :span="6">
                      <div style="text-align:center;margin-top:10%;">
                        <div style="position:relative;">
                          <img v-if="state.fromIndexpointId.pointType !=3&&state.fromIndexpointId.sensorImagePath"
                            style="width:80px;height:80px" :src="state.fromIndexpointId.sensorImagePath" alt="" />
                          <img v-if="state.fromIndexpointId.pointType !=3&&!state.fromIndexpointId.sensorImagePath"
                            src="@/assets/images/noimg.png" />
                          <img v-if="state.fromIndexpointId.pointType ==3"
                            style="background-color: rgba(91, 109, 128, 0.08);padding:10px 10px 15px"
                            src="@/assets/images/xncd.png" />
                          <span style="position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
                                                font-size:12px;background-color:rgba(103, 194, 58, 1);padding:2px 4px;
                                                border-radius:4px;color:#fff;font-weight:700;white-space: nowrap;"
                            v-if="state.fromIndexpointId.pointStatus == 0">
                            {{state.fromIndexpointId.pointStatusName }}</span>
                          <span style="position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
                                                font-size:12px;background-color:rgba(227, 60, 100, 1);padding:2px 4px;
                                                border-radius:4px;color:#fff;font-weight:700;white-space: nowrap;"
                            v-else>
                            {{state.fromIndexpointId.pointStatusName }}</span>

                        </div>
                        <p style="font-weight:700;font-size:14px;margin-top: 20px;">
                          {{state.fromIndexpointId.sensorName}}<span
                            v-if="state.fromIndexpointId.pointType == 1">【{{ state.fromIndexpointId.scale }}】</span>
                        </p>
                        <p style="font-size:14px"><span>{{state.fromIndexpointId.pointVersion}}</span>
                          <el-button size="small" v-if="state.fromIndexpointId.needUpdate" type="primary" link>发现新版本
                            <svg-icon icon-class="shengji" />
                          </el-button>
                        </p>
                      </div>
                    </el-col>
                    <el-col v-if="state.mulpointTypeName != '多参'" :span="18" class="el-drawer_desc">
                      <el-row :gutter="20">
                        <el-col :span="8">
                          <p>测点编号</p>
                          <p>{{state.fromIndexpointId.pointId}}</p>
                        </el-col>
                        <el-col :span="8">
                          <p>测点类型</p>
                          <p>{{state.fromIndexpointId.pointTypeName}}</p>
                        </el-col>
                        <el-col :span="8">
                          <p>类型</p>
                          <p v-if="state.baohanD == 'D'">开关量</p>
                          <p v-else-if="state.baohanD == 'S'">累计量</p>
                          <p v-else>模拟量</p>
                        </el-col>
                        <el-col :span="8" v-if="state.fromIndexpointId.pointType != 3">
                          <p>数值</p>
                          <p><span
                              style="color:rgba(103, 194, 58, 1);">{{state.fromIndexpointId.pointValue}}</span>{{state.fromIndexpointId.sensorUnit}}
                          </p>
                        </el-col>
                        <el-col :span="8">
                          <p>所属区域</p>
                          <p>{{state.fromIndexpointId.pointAreaName}}</p>
                        </el-col>
                        <el-col :span="8">
                          <p>安装时间</p>
                          <p>{{state.fromIndexpointId.createTime}}</p>
                        </el-col>
                        <el-col :span="8" v-if="state.fromIndexpointId.pointType == 3">
                          <p>虚拟表达式</p>
                          <p>
                            <span v-for="item in state.expressionVoList">
                              {{item.value}}
                            </span>
                          </p>
                        </el-col>
                        <el-col :span="8" v-if="state.fromIndexpointId.pointType != 3">
                          <p>设备唯一编号</p>
                          <p v-if="state.fromIndexpointId.pointIdentifyingNo!=null">
                            {{state.fromIndexpointId.pointIdentifyingNo}}</p>
                          <p v-else>-</p>
                        </el-col>
                        <el-col :span="8">
                          <p>地理位置(X Y Z)</p>
                          <span class="chaolink"
                            v-if="state.fromIndexpointId.locationX !=null ||  state.fromIndexpointId.locationY!=null||state.fromIndexpointId.locationZ!=null">
                            {{state.fromIndexpointId.locationX}},{{state.fromIndexpointId.locationY}},{{state.fromIndexpointId.locationZ}}
                          </span>
                          <span v-else>-</span>
                        </el-col>
                        <el-col :span="24" v-if="state.fromIndexpointId.needPlaceType">
                          <p>地点类型</p>
                          <p v-if="state.fromIndexpointId.placeTypeName!=null">
                            {{state.fromIndexpointId.placeTypeName}}{{state.fromIndexpointId.placeTypeCode}}
                            <el-popover v-if="state.fromIndexpointId.placeType !=null" placement="right" :width="650"
                              popper-style="padding: 20px;">
                              <template #reference>
                                <svg-icon icon-class="tishi" />
                              </template>
                              <template #default>
                                <el-row :gutter="20" class="el-drawer_mash" v-if="state.fromIndexpointId.placeType">
                                  <el-col :span="5">
                                    <img v-if="state.fromIndexpointId.placeType.imagePath !=null" class="w100"
                                      style="height:160px" :src="state.fromIndexpointId.placeType.imagePath" />
                                    <img v-else src="@/assets/images/noimg.png" />
                                  </el-col>
                                  <el-col :span="19">
                                    <el-row :gutter="20">
                                      <el-col :span="24">
                                        <p>{{ state.fromIndexpointId.placeType.sensorType }}设置地点
                                        </p>
                                        <p>{{ state.fromIndexpointId.placeType.cutArea }}
                                        </p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>{{ state.fromIndexpointId.placeType.sensorType }}编号
                                        </p>
                                        <p>{{ state.fromIndexpointId.placeType.typeCode }}
                                        </p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>报警浓度(%)</p>
                                        <p>{{ state.fromIndexpointId.placeType.alarmValue }}
                                        </p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>断电浓度(%)</p>
                                        <p>{{ state.fromIndexpointId.placeType.cutValue }}
                                        </p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>复电浓度(%)</p>
                                        <p>{{ state.fromIndexpointId.placeType.resumeValue }}
                                        </p>
                                      </el-col>
                                      <el-col :span="24">
                                        <p>断电范围</p>
                                        <p>{{ state.fromIndexpointId.placeType.cutArea }}
                                        </p>
                                      </el-col>
                                    </el-row>
                                  </el-col>
                                </el-row>
                              </template>
                            </el-popover>
                          </p>
                          <p v-else>-</p>
                        </el-col>
                      </el-row>
                    </el-col>
                    <!-- 多参测点 -->
                    <el-col v-else :span="18" class="el-drawer_desc">
                      <el-row :gutter="20">
                        <el-col :span="8">
                          <p>测点类型</p>
                          <p>{{state.fromIndexpointId.pointTypeName}}</p>
                        </el-col>

                        <el-col :span="8">
                          <p>所属区域</p>
                          <p>{{state.fromIndexpointId.pointAreaName}}</p>
                        </el-col>
                        <el-col :span="8">
                          <p>设备唯一编号</p>
                          <p v-if="state.fromIndexpointId.pointIdentifyingNo!=null">
                            {{state.fromIndexpointId.pointIdentifyingNo}}</p>
                          <p v-else>-</p>
                        </el-col>
                        <el-col :span="8">
                          <p>安装时间</p>
                          <p>{{state.fromIndexpointId.createTime}}</p>
                        </el-col>

                        <el-col :span="16">
                          <p>地理位置(X Y Z)</p>
                          <span class="chaolink"
                            v-if="state.fromIndexpointId.locationX !=null ||  state.fromIndexpointId.locationY!=null||state.fromIndexpointId.locationZ!=null">
                            {{state.fromIndexpointId.locationX}},{{state.fromIndexpointId.locationY}},{{state.fromIndexpointId.locationZ}}
                          </span>
                          <span v-else>-</span>
                        </el-col>
                        <el-col :span="16" v-if="state.fromIndexpointId.needPlaceType">
                          <p>地点类型</p>
                          <p v-if="state.fromIndexpointId.placeTypeName!=null">
                            {{state.fromIndexpointId.placeTypeName}}{{state.fromIndexpointId.placeTypeCode}}
                            <el-popover v-if="state.fromIndexpointId.placeType !=null" placement="right" :width="650"
                              popper-style="padding: 20px;">
                              <template #reference>
                                <svg-icon icon-class="tishi" />
                              </template>
                              <template #default>
                                <el-row :gutter="20" class="el-drawer_mash" v-if="state.fromIndexpointId.placeType">
                                  <el-col :span="5">
                                    <img v-if="state.fromIndexpointId.placeType.imagePath !=null" class="w100"
                                      style="height:160px" :src="state.fromIndexpointId.placeType.imagePath" />
                                    <img v-else src="@/assets/images/noimg.png" />
                                  </el-col>
                                  <el-col :span="19">
                                    <el-row :gutter="20">
                                      <el-col :span="24">
                                        <p>{{ state.fromIndexpointId.placeType.sensorType }}设置地点
                                        </p>
                                        <p>{{ state.fromIndexpointId.placeType.cutArea }}
                                        </p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>{{ state.fromIndexpointId.placeType.sensorType }}编号
                                        </p>
                                        <p>{{ state.fromIndexpointId.placeType.typeCode }}
                                        </p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>报警浓度(%)</p>
                                        <p>{{ state.fromIndexpointId.placeType.alarmValue }}
                                        </p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>断电浓度(%)</p>
                                        <p>{{ state.fromIndexpointId.placeType.cutValue }}
                                        </p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>复电浓度(%)</p>
                                        <p>{{ state.fromIndexpointId.placeType.resumeValue }}
                                        </p>
                                      </el-col>
                                      <el-col :span="24">
                                        <p>断电范围</p>
                                        <p>{{ state.fromIndexpointId.placeType.cutArea }}
                                        </p>
                                      </el-col>
                                    </el-row>
                                  </el-col>
                                </el-row>
                              </template>
                            </el-popover>
                          </p>
                          <p v-else>-</p>
                        </el-col>
                        <el-col :span="8">
                          <p>最后一次上线时间</p>
                          <p>
                            <span class="chaolink">{{state.fromIndexpointId.lastOnlineTime}}
                            </span>
                          </p>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="24" v-if="state.fromIndexpointId.pointType == 2">
                      <el-row :gutter="18">
                        <el-col :span="12" v-for="(item,index)  in state.fromIndexpointId.multiplePointBranchList">
                          <p>参数{{index+1}}</p>
                          <p>{{item.name}}
                            <em v-if="item.pointValue!=null" style="font-style:normal;color:rgba(103, 194, 58, 1);
                                                    font-size:16px;font-weight:bold;">{{item.pointValue}}
                            </em><em v-else>-</em>{{ item.sensorUnit }}
                          </p>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>
                <div class="el-drawer_mash">
                  <!-- 多参测点详情 -->
                  <el-col :span="24" v-if="state.fromIndexpointId.pointType == 2">
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <div class="activeNameTab" style="display:flex;">
                          <el-tabs v-model="state.mulactiveNamePoint" class="demo-tabs w100" @tab-click="handleClick">
                            <el-tab-pane v-for="(item,index) in state.fromIndexpointId.multiplePointBranchList"
                              :label="item.childIndxName !=null ? item.sensorName+'-'+item.childIndexName : item.sensorName"
                              :name="item.sensorId">
                              <el-row :gutter="20" v-if="state.mulactiveNamePoint ==item.sensorId">
                                <el-col :span="24">
                                  <p class="activeNameTab" style="margin-top:12px;margin-bottom:0;"
                                    v-if="item.baohanD !='S'">
                                    <span v-for="(point,pointIndex) in state.pointactiveNameList" :key="point.type"
                                      @click="ponitactiveNameTabClick(point.type)">
                                      <span v-if="item.baohanD=='D'">
                                        <span v-if="item.needGrandalarm">
                                          <span class="span1" :class="activeNum ==point.type ? 'active1':''"
                                            v-if="point.type==3&&item.isCut !=null">{{ point.name }}</span>
                                          <span class="span1" :class="activeNum ==point.type ? 'active1':''"
                                            v-if="point.type!=4&&point.type!=3">{{ point.name }}</span>
                                        </span>
                                        <span v-else>
                                          <span class="span1" :class="activeNum ==point.type ? 'active1':''"
                                            v-if="point.type==3&&item.isCut !=null">{{ point.name }}</span>
                                          <span class="span1" :class="activeNum ==point.type ? 'active1':''"
                                            v-if="point.type!=4 && point.type!=2&&point.type!=3">{{ point.name }}</span>
                                        </span>
                                      </span>
                                      <span v-else>
                                        <span v-if="item.needGrandalarm">
                                          <span class="span1" :class="activeNum ==point.type ? 'active1':''"
                                            v-if="point.type==3&&item.isCut !=null">{{ point.name }}</span>
                                          <span class="span1" v-if="point.type!=3"
                                            :class="activeNum ==point.type ? 'active1':''">{{ point.name }}</span>
                                        </span>
                                        <span v-else>
                                          <span class="span1" :class="activeNum ==point.type ? 'active1':''"
                                            v-if="point.type==3&&item.isCut !=null">{{ point.name }}</span>
                                          <span class="span1" :class="activeNum ==point.type ? 'active1':''"
                                            v-if="point.type!=2&&point.type!=3">{{ point.name }}</span>
                                        </span>
                                      </span>
                                    </span>
                                  </p>
                                </el-col>
                                <div class="desc_box w100" v-if="item.baohanD !='S'">
                                  <div class="w100" v-if="activeNum == 1">
                                    <el-row :gutter="20" v-if="item.alarmBasic !=null">
                                      <el-col :span="12">
                                        <p>报警模式</p>
                                        <div v-if="state.baohanD !='D'">
                                          <p v-if="item.alarmBasic.alarmType==0">
                                            无报警
                                          </p>
                                          <p v-else-if="item.alarmBasic.alarmType==1">
                                            上限报警</p>
                                          <p v-else-if="item.alarmBasic.alarmType==2">
                                            下限报警值</p>
                                          <p v-else>上下限报警值</p>
                                        </div>
                                        <div v-else>
                                          <p>报警模式</p>
                                          <p v-if="item.alarmBasic.alarmType==0">
                                            无报警
                                          </p>
                                          <p v-if="item.alarmBasic.alarmType==1">
                                            {{item.highShow}}报警</p>
                                          <p v-if="item.alarmBasic.alarmType==2">
                                            {{item.lowShow}}报警</p>
                                        </div>
                                        <p v-if="item.alarmBasic.alarmType==1 || item.alarmBasic.alarmType==3">
                                          <span>上限报警值
                                            ≥{{ item.alarmBasic.upAlarmValue }}</span>
                                          <span class="marl40">上限解报值
                                            ＜{{ item.alarmBasic.upRelieveValue }}</span>
                                        </p>
                                        <p v-if="item.alarmBasic.alarmType==2 || item.alarmBasic.alarmType==3">
                                          <span>下限报警值
                                            ≤{{ item.alarmBasic.downAlarmValue }}</span>
                                          <span class="marl40">下限解报值
                                            ＞{{ item.alarmBasic.downRelieveValue }}</span>
                                        </p>
                                      </el-col>
                                      <el-col :span="12"
                                        v-if="item.prealarmBasic!=null&&item.prealarmBasic.hasPreAlarm">
                                        <p>预报警</p>
                                        <p><span v-if="item.prealarmBasic.upPrealarmValue!=null">上限预报值
                                            {{ item.prealarmBasic.upPrealarmValue }}</span><br />
                                          <span style="margin-top:20px;display: inline-block;"
                                            v-if="item.prealarmBasic.downPrealarmValue!=null">下限预报值
                                            {{ item.prealarmBasic.downPrealarmValue }}</span><span class="marl40">超时
                                            {{ item.prealarmBasic.prealarmTimeout }}分钟</span>
                                        </p>
                                      </el-col>
                                      <el-col :span="12"
                                        v-if="item.prealarmBasic!=null&&item.prealarmBasic.hasConstantPreAlarm">
                                        <p>恒值预报警持续时间</p>
                                        <p>{{item.prealarmBasic.constantTime}}分钟
                                        </p>
                                      </el-col>
                                    </el-row>
                                  </div>
                                  <div class="" v-if="activeNum == 2">
                                    <el-row :gutter="20"
                                      v-if="!item.hasChangeGrandAlarm && !item.hasDownGrandAlarm&& !item.hasMoreGrandAlarm&& !item.hasUpGrandAlarm">
                                      <el-col :span="24">
                                        <div class="fcc">
                                          <img style="width:200px;height:200px;" src="@/assets/images/tabnopoint.png" />
                                          <p>
                                            <p>暂未配置哦~</p>
                                          </p>
                                        </div>
                                      </el-col>
                                    </el-row>
                                    <el-row :gutter="20" v-else>
                                      <el-col :span="24" v-if="item.hasChangeGrandAlarm">
                                        <p>变化参数</p>
                                        <p><span
                                            v-if="item.upGrandalarmBasic.grandalarmRate.thresholdValue == null">变化率判断门限≥
                                            {{ item.upGrandalarmBasic.grandalarmRate.thresholdValue }}</span>
                                          <span class="marl40">变化率持续周期
                                            {{ item.upGrandalarmBasic.grandalarmRate.rateCycle }}</span>
                                        </p>
                                      </el-col>
                                      <el-col :span="12">
                                        <p>一级报警</p>
                                        <p v-if="item.hasUpGrandAlarm">
                                          <span>上限预报值≥
                                            {{ item.upGrandalarmBasic.grandoneValue }}</span><span class="marl40">或
                                            持续≤
                                            {{ item.upGrandalarmBasic.grandoneTime }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{item.upGrandalarmBasic.grandalarmRate.rateOneValue  }}</span>
                                        </p>
                                        <p v-if="item.hasDownGrandAlarm">
                                          <span>下限预报值≥
                                            {{ item.downGrandalarmBasic.grandoneValue }}</span><span class="marl40">或
                                            持续≤
                                            {{ item.downGrandalarmBasic.grandoneTime }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{item.downGrandalarmBasic.grandalarmRate.rateOneValue  }}</span>
                                        </p>
                                      </el-col>
                                      <el-col :span="12">
                                        <p>二级报警</p>
                                        <p v-if="item.hasUpGrandAlarm">
                                          <span>上限预报值≥
                                            {{item.upGrandalarmBasic.grandtwoValue  }}</span><span class="marl40">或
                                            持续≤
                                            {{item.upGrandalarmBasic.grandtwoTime  }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{  item.upGrandalarmBasic.grandalarmRate.rateTwoValue}}</span>
                                        </p>
                                        <p v-if="item.hasDownGrandAlarm">
                                          <span>下限预报值≥
                                            {{item.downGrandalarmBasic.grandtwoValue  }}</span><span class="marl40">或
                                            持续≤
                                            {{item.downGrandalarmBasic.grandtwoTime  }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{  item.downGrandalarmBasic.grandalarmRate.rateTwoValue}}</span>
                                        </p>
                                      </el-col>
                                      <el-col :span="12">
                                        <p>三级报警</p>
                                        <p v-if="item.hasUpGrandAlarm">
                                          <span>上限预报值≥
                                            {{ item.upGrandalarmBasic.grandthreeValue }}</span><span class="marl40">或
                                            持续≤
                                            {{ item.upGrandalarmBasic.grandthreeTime }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{ state.fromIndexpointId.upGrandalarmBasic.grandalarmRate.rateThreeValue }}</span>
                                        </p>
                                        <p v-if="item.hasDownGrandAlarm">
                                          <span>下限预报值≥
                                            {{ item.downGrandalarmBasic.grandthreeValue }}</span><span class="marl40">或
                                            持续≤
                                            {{ item.downGrandalarmBasic.grandthreeTime }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{ item.downGrandalarmBasic.grandalarmRate.rateThreeValue }}</span>
                                        </p>
                                      </el-col>
                                      <el-col :span="12">
                                        <p>四级报警</p>
                                        <p v-if="item.hasUpGrandAlarm">
                                          <span>上限预报值≥
                                            {{ item.upGrandalarmBasic.grandfourValue }}</span><span class="marl40">或
                                            持续≤
                                            {{ item.upGrandalarmBasic.grandfourTime }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{ item.upGrandalarmBasic.grandalarmRate.rateFourValue }}</span>
                                        </p>
                                        <p v-if="item.hasDownGrandAlarm">
                                          <span>下限预报值≥
                                            {{ item.downGrandalarmBasic.grandfourValue }}</span><span class="marl40">或
                                            持续≤
                                            {{ item.downGrandalarmBasic.grandfourTime }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{ item.downGrandalarmBasic.grandalarmRate.rateFourValue }}</span>
                                        </p>
                                      </el-col>
                                      <el-col :span="12" v-if="item.hasMoreGrandAlarm">
                                        <p>五级报警</p>
                                        <p><span>上限预报值≥
                                            {{ item.upGrandalarmBasic.grandfiveValue }}</span><span class="marl40">或
                                            持续≤
                                            {{ item.upGrandalarmBasic.grandfiveTime }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{ item.upGrandalarmBasic.grandalarmRate.rateFiveValue }}</span>
                                        </p>
                                      </el-col>
                                      <el-col :span="12" v-if="item.hasMoreGrandAlarm">
                                        <p>六级报警</p>
                                        <p><span>上限预报值≥
                                            {{ item.upGrandalarmBasic.grandsixValue }}</span><span class="marl40">或
                                            持续≤
                                            {{ item.upGrandalarmBasic.grandsixTime }}</span><span class="marl40"
                                            v-if="item.hasChangeGrandAlarm">或
                                            涨幅≥
                                            {{ item.upGrandalarmBasic.grandalarmRate.rateSixValue }}</span>
                                        </p>
                                      </el-col>
                                    </el-row>
                                  </div>
                                  <div class="" v-if="activeNum == 3">
                                    <el-row :gutter="20">
                                      <el-col :span="24" v-if="item.cutValueList[0].cutStationList.length == 0">
                                        <div class="fcc">
                                          <img style="width:200px;height:200px;" src="@/assets/images/tabnopoint.png" />
                                          <p>
                                            <p>暂未配置哦~</p>
                                          </p>
                                        </div>
                                      </el-col>
                                      <el-col :span="24" class="detailcollapse" v-else>
                                        <el-collapse v-model="state.collapseAtive" @change="handleChange">
                                          <el-collapse-item :name="index" v-for="(item11,index) in item.cutValueList">
                                            <template #title>
                                              <div class="fbc" style="width:97%;" @click="stopCollapse">
                                                <div style="width:98%;text-align:left;">
                                                  <el-row :gutter="20">
                                                    <el-col :span="12">
                                                      <p style="padding:8px 0 4px 4px;margin:0;width:100%">
                                                        断电模式
                                                      </p>
                                                      <p v-if="item.baohanD !='D'"
                                                        style="padding:0;margin:0;width:100%">
                                                        上限断电
                                                        断电值≥{{ item11.cutValue }}
                                                        复电值＜{{ item11.resumeValue }}
                                                      </p>
                                                      <p v-else>
                                                        <span v-if="item11.cutType==1">
                                                          {{item.highShow}}断电
                                                        </span>
                                                        <span v-if="item11.cutType==2">
                                                          {{item.lowShow}}断电
                                                        </span>
                                                      </p>
                                                    </el-col>
                                                    <el-col :span="12">
                                                      <p style="padding:8px 0 4px 4px;margin:0;width:100%">
                                                        断电设备分布
                                                      </p>
                                                      <p style="padding:0;margin:0;width:100%">
                                                        <el-button type="primary" link size="mini">
                                                          查看
                                                        </el-button>
                                                      </p>
                                                    </el-col>
                                                  </el-row>
                                                </div>
                                              </div>
                                            </template>
                                            <div v-for="itemcut in item11.cutStationList">
                                              <div style="padding:10px 0;">
                                                {{itemcut.stationCode+'-'+itemcut.stationPlaceName}}
                                              </div>
                                              <vxe-table border ref="tableRef" :data="itemcut.controlPortList">
                                                <vxe-column title="分站编号" field="stationCode">
                                                </vxe-column>
                                                <vxe-column title="分站名称" field="stationPlaceName">
                                                </vxe-column>
                                                <vxe-column field="controlPort" title="开出口号">
                                                </vxe-column>
                                                <vxe-column field="controlPortType" title="控制设备">
                                                  <template #default="{row}">
                                                    <span v-if="row.controlPortType== 1">断电仪</span>
                                                    <span v-else-if="row.controlPortType== 2">声光报警</span>
                                                  </template>
                                                </vxe-column>
                                                <vxe-column field="pointPlaceName" title="安装地点">
                                                </vxe-column>
                                                <vxe-column field="feedPointId" title="馈电测点">
                                                </vxe-column>
                                                <vxe-column field="feedSensorName" title="馈电设备">
                                                </vxe-column>
                                              </vxe-table>
                                            </div>
                                          </el-collapse-item>
                                        </el-collapse>
                                      </el-col>
                                    </el-row>
                                  </div>
                                  <div class="" v-if="activeNum == 4">
                                    <el-row :gutter="20" v-if="item.cutArea.areaIdList">
                                      <el-col :span="12">
                                        <p>断电区域</p>
                                        <p v-if="item.cutArea&&item.cutArea.areaNameList">
                                          <span v-if="item.cutArea.areaNameList.length>0">
                                            {{item.cutArea.areaNameList.toString()}}
                                          </span>
                                        </p>
                                      </el-col>
                                      <el-col :span="12">
                                        <p>断电值≥</p>
                                        <p>{{item.cutArea.cutValue}}
                                        </p>
                                      </el-col>
                                      <el-col :span="12">
                                        <p>复电值＜</p>
                                        <p>{{item.cutArea.resumeValue}}
                                        </p>
                                      </el-col>
                                    </el-row>
                                    <el-row :gutter="20" v-else>
                                      <el-col :span="24">
                                        <div class="fcc">
                                          <img style="width:200px;height:200px;" src="@/assets/images/tabnopoint.png" />
                                          <p>
                                            <p>暂未配置哦~</p>
                                          </p>
                                        </div>
                                      </el-col>
                                    </el-row>
                                  </div>
                                  <div class="" v-if="activeNum == 5">
                                    <el-row :gutter="20">
                                      <el-col :span="12">
                                        <p>下次标校时刻</p>
                                        <p style="color:rgba(230, 162, 60, 1)">
                                          3天21小时15秒后（2024-5-12
                                          12:00:00）</p>
                                      </el-col>
                                      <el-col :span="12">
                                        <p>标校达标数值</p>
                                        <p>20/20</p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>最近标校时刻</p>
                                        <p>
                                          <el-button type="primary" link>
                                            正常</el-button>
                                        </p>
                                      </el-col>
                                      <el-col :span="6">
                                        <p>标校结果</p>
                                        <p>36分钟</p>
                                      </el-col>
                                      <el-col :span="12">
                                        <p>标校持续时长</p>
                                        <p>3天21小时15秒后（2024-5-12 12:00:00）
                                        </p>
                                      </el-col>
                                    </el-row>
                                  </div>
                                </div>
                              </el-row>
                            </el-tab-pane>
                          </el-tabs>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <!-- 普通测点详情 -->
                  <el-col :span="24"
                    v-if="state.fromIndexpointId.pointType == 1 || state.fromIndexpointId.pointType == 3">
                    <el-row :gutter="20">
                      <div class="desc_box w100" v-if="state.baohanD !='S'">
                        <div v-if="activeNum == 1">
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <div v-if="state.baohanD !='D'">
                                <p>报警模式</p>
                                <p v-if="state.fromIndexpointId.alarmBasic.alarmType==0">无报警
                                </p>
                                <p v-else-if="state.fromIndexpointId.alarmBasic.alarmType==1">
                                  上限报警</p>
                                <p v-else-if="state.fromIndexpointId.alarmBasic.alarmType==2">
                                  下限报警值</p>
                                <p v-else>上下限报警值</p>
                              </div>
                              <div v-else>
                                <p>报警模式</p>
                                <p v-if="state.fromIndexpointId.alarmBasic.alarmType==0">无报警
                                </p>
                                <p v-if="state.fromIndexpointId.alarmBasic.alarmType==1">
                                  {{state.fromIndexpointId.highShow}}报警</p>
                                <p v-if="state.fromIndexpointId.alarmBasic.alarmType==2">
                                  {{state.fromIndexpointId.lowShow}}报警</p>
                              </div>
                              <p
                                v-if="(state.fromIndexpointId.alarmBasic.alarmType==1 || state.fromIndexpointId.alarmBasic.alarmType==3)&& state.baohanD !='D'">
                                <span>上限报警值
                                  ≥{{ state.fromIndexpointId.alarmBasic.upAlarmValue }}</span>
                                <span class="marl40">上限解报值
                                  ＜{{ state.fromIndexpointId.alarmBasic.upRelieveValue }}</span>
                              </p>
                              <p
                                v-if="(state.fromIndexpointId.alarmBasic.alarmType==2 || state.fromIndexpointId.alarmBasic.alarmType==3)&&state.baohanD !='D'">
                                <span>下限报警值
                                  ≤{{ state.fromIndexpointId.alarmBasic.downAlarmValue }}</span>
                                <span class="marl40">下限解报值
                                  ＞{{ state.fromIndexpointId.alarmBasic.downRelieveValue }}</span>
                              </p>
                            </el-col>
                            <el-col :span="12" v-if="state.fromIndexpointId.prealarmBasic.hasPreAlarm">
                              <p>预报警</p>
                              <p><span v-if="state.baohanD !='D'"><span
                                    v-if="state.fromIndexpointId.prealarmBasic.upPrealarmValue!=null">
                                    上限预报值
                                    {{ state.fromIndexpointId.prealarmBasic.upPrealarmValue }}</span><br />
                                  <span style="margin-top:20px;display: inline-block;"
                                    v-if="state.fromIndexpointId.prealarmBasic.downPrealarmValue!=null">下限预报值
                                    {{ state.fromIndexpointId.prealarmBasic.downPrealarmValue }}</span>
                                </span>
                                <span v-else>
                                  {{state.fromIndexpointId.prealarmBasic.prealarmType==1? state.fromIndexpointId.highShow:state.fromIndexpointId.lowShow}}报警
                                </span>
                                <span class="marl40">超时
                                  {{ state.fromIndexpointId.prealarmBasic.prealarmTimeout }}分钟</span>
                              </p>
                            </el-col>
                            <el-col :span="8" v-if="state.fromIndexpointId.prealarmBasic.hasConstantPreAlarm">
                              <p>恒值预报警持续时间</p>
                              <p>{{state.fromIndexpointId.prealarmBasic.constantTime}}分钟</p>
                            </el-col>
                          </el-row>
                        </div>
                        <div class="" v-if="activeNum == 2">
                          <el-row :gutter="20"
                            v-if="!state.fromIndexpointId.hasChangeGrandAlarm && !state.fromIndexpointId.hasDownGrandAlarm&& !state.fromIndexpointId.hasMoreGrandAlarm&& !state.fromIndexpointId.hasUpGrandAlarm">
                            <el-col :span="24">
                              <div class="fcc">
                                <img style="width:200px;height:200px;" src="@/assets/images/tabnopoint.png" />
                                <p>
                                  <p>暂未配置哦~</p>
                                </p>
                              </div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20" v-else>
                            <el-col :span="24" v-if="state.baohanD != 'D'&&state.fromIndexpointId.hasChangeGrandAlarm">
                              <p>变化参数</p>
                              <p><span>变化率判断门限≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandalarmRate.thresholdValue }}</span>
                                <span class="marl40">变化率持续周期
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandalarmRate.rateCycle }}</span>
                              </p>
                            </el-col>
                            <el-col :span="12">
                              <p>一级报警</p>
                              <p v-if="state.fromIndexpointId.hasUpGrandAlarm"><span v-if="state.baohanD != 'D'">上限预报值≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandoneValue }}</span><span
                                  class="marl40">
                                  <span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandoneTime }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm && state.baohanD != 'D'">或
                                  涨幅≥
                                  {{state.fromIndexpointId.upGrandalarmBasic.grandalarmRate.rateOneValue  }}</span>
                              </p>
                              <p v-if="state.fromIndexpointId.hasDownGrandAlarm"><span
                                  v-if="state.baohanD != 'D'">下限预报值≥
                                  {{ state.fromIndexpointId.downGrandalarmBasic.grandoneValue }}</span><span
                                  class="marl40">
                                  <span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{ state.fromIndexpointId.downGrandalarmBasic.grandoneTime }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm&&state.baohanD != 'D'">或
                                  涨幅≥
                                  {{state.fromIndexpointId.downGrandalarmBasic.grandalarmRate.rateOneValue  }}</span>
                              </p>
                            </el-col>
                            <el-col :span="12">
                              <p>二级报警</p>
                              <p v-if="state.fromIndexpointId.hasUpGrandAlarm"><span v-if="state.baohanD != 'D'">上限预报值≥
                                  {{state.fromIndexpointId.upGrandalarmBasic.grandtwoValue  }}</span><span
                                  class="marl40">
                                  <span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{state.fromIndexpointId.upGrandalarmBasic.grandtwoTime  }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm&&state.baohanD != 'D'">或
                                  涨幅≥
                                  {{  state.fromIndexpointId.upGrandalarmBasic.grandalarmRate.rateTwoValue}}</span>
                              </p>
                              <p v-if="state.fromIndexpointId.hasDownGrandAlarm"><span
                                  v-if="state.baohanD != 'D'">下限预报值≥
                                  {{state.fromIndexpointId.downGrandalarmBasic.grandtwoValue  }}</span><span
                                  class="marl40">
                                  <span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{state.fromIndexpointId.downGrandalarmBasic.grandtwoTime  }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm&&state.baohanD != 'D'">或
                                  涨幅≥
                                  {{  state.fromIndexpointId.downGrandalarmBasic.grandalarmRate.rateTwoValue}}</span>
                              </p>
                            </el-col>
                            <el-col :span="12">
                              <p>三级报警</p>
                              <p v-if="state.fromIndexpointId.hasUpGrandAlarm"><span v-if="state.baohanD != 'D'">上限预报值≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandthreeValue }}</span><span
                                  class="marl40">
                                  <span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandthreeTime }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm&&state.baohanD != 'D'">或
                                  涨幅≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandalarmRate.rateThreeValue }}</span>
                              </p>
                              <p v-if="state.fromIndexpointId.hasDownGrandAlarm"><span
                                  v-if="state.baohanD != 'D'">下限预报值≥
                                  {{ state.fromIndexpointId.downGrandalarmBasic.grandthreeValue }}</span><span
                                  class="marl40">
                                  <span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{ state.fromIndexpointId.downGrandalarmBasic.grandthreeTime }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm&&state.baohanD != 'D'">或
                                  涨幅≥
                                  {{ state.fromIndexpointId.downGrandalarmBasic.grandalarmRate.rateThreeValue }}</span>
                              </p>
                            </el-col>
                            <el-col :span="12">
                              <p>四级报警</p>
                              <p v-if="state.fromIndexpointId.hasUpGrandAlarm"><span v-if="state.baohanD != 'D'">上限预报值≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandfourValue }}</span><span
                                  class="marl40">
                                  <span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandfourTime }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm&&state.baohanD != 'D'">或
                                  涨幅≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandalarmRate.rateFourValue }}</span>
                              </p>
                              <p v-if="state.fromIndexpointId.hasDownGrandAlarm"><span
                                  v-if="state.baohanD != 'D'">下限预报值≥
                                  {{ state.fromIndexpointId.downGrandalarmBasic.grandfourValue }}</span><span
                                  class="marl40">
                                  <span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{ state.fromIndexpointId.downGrandalarmBasic.grandfourTime }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm&&state.baohanD != 'D'">或
                                  涨幅≥
                                  {{ state.fromIndexpointId.downGrandalarmBasic.grandalarmRate.rateFourValue }}</span>
                              </p>
                            </el-col>
                            <el-col :span="12" v-if="state.fromIndexpointId.hasMoreGrandAlarm">
                              <p>五级报警</p>
                              <p><span v-if="state.baohanD != 'D'">上限预报值≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandfiveValue }}</span><span
                                  class="marl40">
                                  <span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandfiveTime }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm&&state.baohanD != 'D'">或
                                  涨幅≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandalarmRate.rateFiveValue }}</span>
                              </p>
                            </el-col>
                            <el-col :span="12" v-if="state.fromIndexpointId.hasMoreGrandAlarm">
                              <p>六级报警</p>
                              <p><span v-if="state.baohanD != 'D'">上限预报值≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandsixValue }}</span><span
                                  class="marl40"><span v-html="state.baohanD == 'D'?'持续时间≤':'或 持续时间≤'"></span>
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandsixTime }}分钟</span><span
                                  class="marl40"
                                  v-if="state.fromIndexpointId.hasChangeGrandAlarm&&state.baohanD != 'D'">或
                                  涨幅≥
                                  {{ state.fromIndexpointId.upGrandalarmBasic.grandalarmRate.rateSixValue }}</span>
                              </p>
                            </el-col>
                          </el-row>
                        </div>
                        <div class="" v-if="activeNum == 3">
                          <el-row :gutter="20">
                            <el-col :span="24" v-if="state.fromIndexpointId.cutValueList[0].cutStationList.length==0">
                              <div class="fcc">
                                <img style="width:200px;height:200px;" src="@/assets/images/tabnopoint.png" />
                                <p>
                                  <p>暂未配置哦~</p>
                                </p>
                              </div>
                            </el-col>
                            <el-col :span="24" class="detailcollapse" v-else>
                              <el-collapse v-model="state.collapseAtive" @change="handleChange">
                                <el-collapse-item :name="index"
                                  v-for="(item,index) in state.fromIndexpointId.cutValueList">
                                  <template #title>
                                    <div class="fbc" style="width:97%;" @click="stopCollapse">
                                      <div style="width:98%;text-align:left;">
                                        <el-row :gutter="20">
                                          <el-col :span="12">
                                            <p style="padding:8px 0 4px 4px;margin:0;width:100%">
                                              断电模式</p>
                                            <p style="padding:0;margin:0;width:100%">
                                              {{item.cutTypeName}}
                                              <span v-if="state.baohanD != 'D'">
                                                断电值≥{{ item.cutValue }}
                                                复电值＜{{ item.resumeValue }}
                                              </span>
                                            </p>
                                          </el-col>
                                          <el-col :span="12">
                                            <p style="padding:8px 0 4px 4px;margin:0;width:100%">
                                              断电设备分布</p>
                                            <p style="padding:0;margin:0;width:100%">
                                              <el-button type="primary" link size="mini">
                                                查看</el-button>
                                            </p>
                                          </el-col>
                                        </el-row>
                                      </div>
                                    </div>
                                  </template>
                                  <div v-for="itemsub in item.cutStationList">
                                    <div style="padding:10px 0;">
                                      {{itemsub.stationCode+'-'+itemsub.stationPlaceName}}
                                    </div>
                                    <vxe-table border ref="tableRef" :data="itemsub.controlPortList">
                                      <vxe-column title="分站编号" field="stationCode">
                                      </vxe-column>
                                      <vxe-column title="分站名称" field="stationPlaceName">
                                      </vxe-column>
                                      <vxe-column field="controlPort" title="开出口号">
                                      </vxe-column>
                                      <vxe-column field="controlPortType" title="控制设备">
                                        <template #default="{row}">
                                          <span v-if="row.controlPortType== 1">断电仪</span>
                                          <span v-else-if="row.controlPortType== 2">声光报警</span>
                                        </template>
                                      </vxe-column>
                                      <vxe-column field="pointPlaceName" title="安装地点">
                                      </vxe-column>
                                      <vxe-column field="feedPointId" title="馈电测点">
                                      </vxe-column>
                                      <vxe-column field="feedSensorName" title="馈电设备">
                                      </vxe-column>
                                    </vxe-table>
                                  </div>
                                </el-collapse-item>
                              </el-collapse>
                            </el-col>
                          </el-row>
                        </div>
                        <div class="" v-if="activeNum == 4">
                          <el-row :gutter="20" v-if="JSON.stringify(state.fromIndexpointId.cutArea)=='{}'">
                            <el-col :span="24">
                              <div class="fcc">
                                <img style="width:200px;height:200px;" src="@/assets/images/tabnopoint.png" />
                                <p>
                                  <p>暂未配置哦~</p>
                                </p>
                              </div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20" v-else>
                            <el-col :span="12">
                              <p>断电区域</p>
                              <p v-if="state.fromIndexpointId.cutArea.areaNameList">
                                <span v-if="state.fromIndexpointId.cutArea.areaNameList.length>0">
                                  {{state.fromIndexpointId.cutArea.areaNameList.toString()}}
                                </span>
                              </p>
                            </el-col>
                            <el-col :span="12">
                              <p>断电值≥</p>
                              <p>{{state.fromIndexpointId.cutArea.cutValue}}</p>
                            </el-col>
                            <el-col :span="12">
                              <p>复电值＜</p>
                              <p>{{state.fromIndexpointId.cutArea.resumeValue}}</p>
                            </el-col>
                          </el-row>
                        </div>
                        <div class="" v-if="activeNum == 5">
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <p>下次标校时刻</p>
                              <p style="color:rgba(230, 162, 60, 1)">
                                3天21小时15秒后（2024-5-12
                                12:00:00）</p>
                            </el-col>
                            <el-col :span="12">
                              <p>标校达标数值</p>
                              <p>20/20</p>
                            </el-col>
                            <el-col :span="6">
                              <p>最近标校时刻</p>
                              <p>
                                <el-button type="primary" link>正常</el-button>
                              </p>
                            </el-col>
                            <el-col :span="6">
                              <p>标校结果</p>
                              <p>36分钟</p>
                            </el-col>
                            <el-col :span="12">
                              <p>标校持续时长</p>
                              <p>3天21小时15秒后（2024-5-12 12:00:00）</p>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </el-row>
                  </el-col>
                </div>
              </template>
            </cardCom>
          </el-col>
          <el-col :span="10">
            <cardCom modTitle="报警统计" style="height:96%">
              <template v-slot:cardTitle>
                <span class="ymdBox">
                  <span :class="state.ymdValue1 == item.type ? 'active' : ''" v-for="item in [
                      { type: 1, label: '今日' },
                      { type: 2, label: '昨日' },
                      { type: 3, label: '近7日' },
                      { type: 4, label: '近1月' },
                    ]" :key="item" @click="ymdClick(item, 1)">{{ item.label }}</span>
                </span>
              </template>
              <template v-slot:cardContent>
                <div id="chartOnePoint" style="height: 230px; width: 100%"></div>
              </template>
            </cardCom>
          </el-col>
          <el-col v-if="state.fromIndexpointId.pointType != 3">
            <cardCom modTitle="标校看板" style="height:96%">
              <template v-slot:cardTitle>
                <span>
                  <div>
                    <span class="monBox">
                      <svg-icon icon-class="rili-gnkamci9" style="fill: rgba(64, 158, 255, 1)" />
                      {{
                        dayjs(state.weekDayObj.list?.from).format(
                          "YYYY年MM月DD日"
                        )
                      }}
                      -
                      {{ dayjs(state.weekDayObj.list?.to).format("DD日") }}
                    </span>
                    <span class="hover" @click="selectDate('prev')">
                      <svg-icon icon-class="zuo" /></span>
                    <span class="hover" @click="selectDate('next')">
                      <svg-icon icon-class="you" /></span>
                  </div>
                </span>
              </template>
              <template v-slot:cardContent>
                <div class="bjBox">
                  <div v-for="(item, index) in state.weekDayObj.dayList" style="flex: 1">
                    <div class="bgtw" style="">
                      <span class="t">
                        {{ dayjs(item).format("DD") }}
                      </span>
                      <span class="w">
                        周{{
                          index == 0
                            ? "一"
                            : index == 1
                            ? "二"
                            : index == 2
                            ? "三"
                            : index == 3
                            ? "四"
                            : index == 4
                            ? "五"
                            : index == 5
                            ? "六"
                            : "日"
                        }}
                      </span>
                    </div>
                    <span class="bjState"> 已达标 </span>
                  </div>
                </div>
              </template>
            </cardCom>
          </el-col>
          <el-col   :span="state.fromIndexpointId.pointType != 3?10:24">
            <cardCom modTitle="故障统计" style="height:96%">
              <template v-slot:cardTitle>
                <span class="ymdBox">
                  <span :class="state.ymdValue2 == item.type ? 'active' : ''" v-for="item in [
                      { type: 1, label: '今日' },
                      { type: 2, label: '昨日' },
                      { type: 3, label: '近7日' },
                      { type: 4, label: '近1月' },
                    ]" :key="item" @click="ymdClick(item, 2)">{{ item.label }}</span>
                </span>
              </template>
              <template v-slot:cardContent>
                <div id="chartTwoPoint" style="height: 130px; width: 100%"></div>
              </template>
            </cardCom>
          </el-col>
          <el-col :span="12" v-if="state.fromIndexpointId.pointType != 3">
            <cardCom modTitle="断电/馈电统计" style="height:96%">
              <template v-slot:cardTitle>
                <span class="ymdBox">
                  <span :class="state.ymdValue3 == item.type ? 'active' : ''" v-for="item in [
                      { type: 'T', label: '今日' },
                      { type: 'Y', label: '昨日' },
                      { type: 'RS', label: '近7日' },
                      { type: 'RM', label: '近1月' },
                    ]" :key="item" @click="ymdClick(item, 3)">{{ item.label }}</span>
                </span>
              </template>
              <template v-slot:cardContent>
                <div id="chartThreePoint" style="height: 300px; width: 100%"></div>
              </template>
            </cardCom>
          </el-col>
          <el-col :span="12" v-if="state.fromIndexpointId.pointType != 3">
            <cardCom modTitle="系统联动" style="height:96%">
              <template v-slot:cardTip>
                <span>共3条</span>
              </template>
              <template v-slot:cardTitle>
                <span class="ymdBox">
                  <span :class="state.ymdValue == item.type ? 'active' : ''" v-for="item in [
                      { type: 1, label: '今日' },
                      { type: 2, label: '昨日' },
                      { type: 3, label: '近7日' },
                      { type: 4, label: '近1月' },
                    ]" :key="item" @click="ymdClick(item, 1)">{{ item.label }}</span>
                </span>
              </template>
              <template v-slot:cardContent>
                <vxe-table border="inner" height="300" show-overflow ref="tableRef" :data="state.xTtableData">
                  <vxe-column type="seq" title="编号"></vxe-column>
                  <vxe-column field="name" title="联动系统"></vxe-column>
                  <vxe-column field="name" title="地点"></vxe-column>
                  <vxe-column field="name" title="维检类型"></vxe-column>
                  <vxe-column field="name" title="开始时间"></vxe-column>
                </vxe-table>
              </template>
            </cardCom>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
  import {
    useStore
  } from "vuex";
  import useSettingsStore from "@/store/modules/settings";
  import {
    nextTick,
    reactive,
    watch
  } from "vue";
  import axios from "@/utils/request";
  import _ from "lodash";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import carduseCom from "@/components/commonCom/carduseCom";
  import cardCom from "@/components/commonCom/cardCom";
  import usePagesStore from "@/store/modules/pages";
  import dayjs from "dayjs";
  import * as echarts from "echarts";
  const {
    proxy
  } = getCurrentInstance();
  const pagesStore = usePagesStore();
  const router = useRouter();
  const storageSetting2 = JSON.parse(localStorage.getItem("layout-set"));
  const settingsStore = useSettingsStore();
  const isDark = computed(() => settingsStore.isDark);
  import usePermissionStore from "@/store/modules/permission";
  const permissionStore = usePermissionStore();
  const sidebarRouters = computed(() => permissionStore.sidebarRouters);
  let table1 = ref();
  const store = useStore()

  const areaData = ref([]);
  const formData1 = ref({});
  const formData2 = ref({});
  const formData3 = ref({
    pageNum: 1,
    pageSize: 10,
    flag: "B",
    isPower: false
  });
  const stationData = ref([]);
  const pointData = ref({});
  const outPut = ref([]);
  const areaName = ref("");
  const alarmNum = ref({});
  const tableHeads = ref([]);
  const hideStation = ref(false);
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
  /**
   * 获取常用菜单展示
   */
  const state = reactive({
    mulpointTypeName: undefined, //含有多参字符
    mulactiveNamePoint: undefined,
    // 普通测点
    baohanD: undefined,
    activeNamePoint: 1,
    pointactiveNameList: [{
      name: '报警配置',
      type: 1
    }, {
      name: '分级配置',
      type: 2
    }, {
      name: '普通断电',
      type: 3
    }, {
      name: '区域断电',
      type: 4
    }],
    collapseAtive: 0,
    baohanD: "",
    controlPortType: "",
    conditionsensorName: "",
    searchTreeList: [],
    statusList: [],
    highlightedRow: null,
    ymdValue: 1,
    ymdValue1: 1,
    ymdValue2: 1,
    ymdValue3: "T",
    xTtableData: [],
    handleRightTabValue: undefined,
    fromIndexpointIdObj: {},
    fromIndexpointId: undefined,
    handleRightSelectList: [],
    handleRightSelectLabel: undefined,
    handleRightSelectType: undefined,
    handleRightSelectValue: undefined,
    handleRightSelectShow: false,
    handleRightSelectCom: undefined,
    handleRightSelect: {
      x: 0,
      y: 0,
    },
    weekDayObj: {},
    handleRdrawerShow: false,
    usemenuShow: false,
    cateList: [],
    topDataFourList: [{
        type: 1,
        label: "实时测点",
        value: 0,
        icon: "shishicedian",
        color: "#0a9dff",
      },
      {
        type: 2,
        label: "测点断电",
        value: 0,
        icon: "duandiancedian",
        color: "#ff5555",
      },
      {
        type: 3,
        label: "测点断线",
        value: 0,
        icon: "cedianduanxian",
        color: "#ff5555",
      },
      {
        type: 4,
        label: "测点报警",
        value: 0,
        icon: "cedianbaojing",
        color: "#ff5555",
      },
    ],
    safetyDays: 0,
    pointSearch: undefined,
    eventGlobalValue: undefined,
  });
  sidebarRouters.value.forEach((item) => {
    if (!item.hidden) {
      state.cateList.push(item);
    }
  });

  function resultArrayClick(item) {
    router.push({
      name: item.name,
    });
  }
  // 计算属性生成结果数组
  const resultArray = computed(() => {
    const result = [];
    const traverse = (node, parentName) => {
      // 解构children，其余属性保留
      const {
        children,
        ...rest
      } = node;

      // 匹配目标类型则加入结果
      if (node.isCommon === true) {
        result.push({
          ...rest,
          parentPath: parentName ?? null,
        });
      }

      // 递归处理子节点，传递当前节点name作为父级名称
      if (children && children.length) {
        children.forEach((child) => {
          traverse(child, node.name);
        });
      }
    };
    // 遍历根节点，初始父级为null
    state.cateList.forEach((root) => traverse(root, null));
    return result;
  });
  // 获取当前屏幕的宽度
  const screenWidth = ref(window.innerWidth);

  const setClassName = () => {
    if (isDark.value) {
      return "dark_table";
    }
  };
  const eventGlobalclick = () => {
    pagesStore.triggerGlobalEvent(state.eventGlobalValue);
  };

  // 获取首页地点下拉
  const getArea = () => {
    axios.get("/stationData/homePlace").then((res) => {
      areaData.value = res.data;
    });
  };
  // 获取首页顶部数据
  const getHomeTop = () => {
    axios.get("/home/top").then((res) => {
      state.safetyDays = res.data.safetyDays;
      state.topDataFourList.forEach((item) => {
        if (item.type == 1) {
          item.value = res.data.pointNum;
        } else if (item.type == 2) {
          item.value = res.data.realCutNum;
        } else if (item.type == 3) {
          item.value = res.data.realBrokenNum;
        } else if (item.type == 4) {
          item.value = res.data.realAlarmNum;
        }
      });
    });
  };
  // 获取首页分站列表数据
  const getStationData = () => {
    axios.post("/stationData/homeReal", formData1.value).then((res) => {
      stationData.value = res.data;
      // 分站搜索存在右侧也随之搜索
      if (formData1.value.stationPlaceName) {
        formData2.value.stationCodeList = res.data.map((item) => {
          return item.stationCode;
        });
        formData3.value.stationCodeList = res.data.map((item) => {
          return item.stationCode;
        });
        getPointData();
        getDevData();
        getAlarmNum();
      }
    });
  };
  // 搜索分站数据
  const searchFn = (val) => {
    getStationData();
  };
  // 获取首页设备列表数据
  const getDevData = (data) => {
    axios.post("/controlPortData/homeReal", formData2.value).then((res) => {
      outPut.value = res.data;
    });
  };

  function controlPortTypeChange(val) {
    getDevData();
  }
  // 获取首页测点数据
  const getPointData = () => {
    axios
      .post("/hisPointFeed/listPointName", {
        condition: state.conditionsensorName,
      })
      .then((res) => {
        state.searchTreeList = res.data;
      });
    axios.post("/pointData/homeRealPoint", formData3.value).then((res) => {
      pointData.value = res.data;
    });
    axios.post("/pointData/attainAllStatus", {
      flag: formData3.value.flag
    }).then((res) => {
      state.statusList = res.data
    });

  };

  // 获取首页测点报警离线数量
  const getAlarmNum = () => {
    axios.post("/pointData/homeRealPointDetail", formData3.value).then((res) => {
      alarmNum.value.alarmNumber = res.data.alarmNumber;
      alarmNum.value.offlineNumber = res.data.offlineNumber;
      alarmNum.value.latestTime = res.data.latestTime;
    });
  };
  // 分站列表行数据选择
  // 取消选择
  const selectedRows = ref([]);
  const selectedRowId = ref(null);
  const cancelChange = (row, column, event) => {
    selectedRowId.value = row.stationCode;
    const index = selectedRows.value.findIndex(
      (item) => item.stationCode === row.stationCode
    );
    if (index >= 0) {
      selectedRows.value.splice(index, 1);
      areaName.value = "";
      formData3.value.stationCodeList = [];
      formData2.value.stationCodeList = [];
    } else {
      selectedRows.value.push(row);
      areaName.value = row.stationPlaceName;
      formData3.value.stationCodeList = [row.stationCode];
      formData2.value.stationCodeList = [row.stationCode];
    }
    getPointData();
    getDevData();
    getAlarmNum();
  };

  function pointSearchBlur(val) {
    formData3.value.condition = state.pointSearch;
    formData2.value.condition = state.pointSearch;
    getPointData();
    getDevData();
    getAlarmNum();
  }
  // 切换测点类型
  const changTabs = (type) => {
    formData3.value.condition = undefined;
    state.conditionsensorName = type;
    formData3.value.flag = type;
    getPointData();
    getAlarmNum();
    if (type == "B") {
      tableHeads.value = table_headers.homePointAllDetail;
    } else if (type == "A") {
      let arr = [];
      arr = _.cloneDeep(table_headers.homePointSimulateDetail);
      tableHeads.value = arr;
    } else if (type == "D") {
      tableHeads.value = table_headers.homePointSwitchDetail;
    } else if (type == "S") {
      let arr = [];
      arr = _.cloneDeep(table_headers.homePointAddDetail);
      tableHeads.value = arr;
    } else if (type == "V") {
      tableHeads.value = table_headers.homePointVirtualDetail;
    }
  };
  // 隐藏分站
  const hiddenStation = () => {
    hideStation.value = true;
  };

  const headerCellStyle = () => {
    if (isDark.value) {
      return "darkHeader";
    } else {
      return "header";
    }
  };

  function usemenuClick() {
    state.usemenuShow = !state.usemenuShow;
  }

  function carduseClick(data) {
    state.usemenuShow = data;
  }
  // 首页跳转
  function shouyeToList(type) {
    if (type == 1) {
      router.push({
        name: "Lb_realPoint",
      });
    } else if (type == 2) {
      router.push({
        name: "Lb_realCutList",
      });
    } else if (type == 3) {
      router.push({
        name: "Lb_realSensorFailure",
        query: {
          label: "断线"
        },
      });
    } else if (type == 4) {
      router.push({
        name: "Lb_realAlarm",
      });
    }
  }
  const rowStyle = ({
    row
  }) => {
    if (currentRowId.value === row.pointId) {
      var index = row.fontColor.indexOf("1)")
      var resolve = row.fontColor.substring(0, index);
      return {
        'background': resolve + '.2) !important',
        'color': row.fontColor
      }
    } else {
      return {
        'background': '',
        'color': row.fontColor
      }
    }
  }
  const rowStyleleft = ({
    row
  }) => {
    if (selectedRowId.value === row.stationCode) {
      var index = row.stationColor.indexOf("1)")
      var resolve = row.stationColor.substring(0, index);
      return {
        'background': resolve + '.2) !important',
        'color': row.stationColor
      }
    } else {
      return {
        'background': '',
        'color': row.stationColor,
        'border-left': '2px solid red'
      }
    }
  }
  // 测点信息表头列宽拖动事件
  function headerDragendChange(newWidth,oldWidth, column, event){
    column.rawColumnKey.width=newWidth
    axios.post("/vxeheaders/setHeaders",tableHeads.value).then(res=>{
    })
  }

  function cellClassName({
    row,
    column,
    rowIndex,
    columnIndex
  }) {
    if (columnIndex === 3) { // 为第二列设置样式
      return 'highlight-column'
    }
    return ''
  }
  const hoverBg = ref(null)
  const cellmouseenter = (row) => {
    var index = row.stationColor.indexOf("1)")
    var resolve = row.stationColor.substring(0, index);
    hoverBg.value = resolve + '.2)'
  }
  const hoverBg1 = ref(null)
  const cellmouseenter1 = (row) => {
    if (row.fontColor != null) {
      var index = row.fontColor.indexOf("1)")
      var resolve = row.fontColor.substring(0, index);
      hoverBg1.value = resolve + '.2)'
    }
  }
  // 右击菜单显示抽屉内容显示
  const emit = defineEmits();
  import lishiquxian from "@/views/pages/curveChart/hisChart";
  import zhuangtaitu from "@/views/pages/curveChart/statusChart";
  import barChart from "@/views/pages/curveChart/barChart";

  import hisAlarmList from "@/views/pages/hisTableList/hisAlarmList";
  import hisCutList from "@/views/pages/hisTableList/hisCutList";
  import hisFeedList from "@/views/pages/hisTableList/hisFeedList";
  import hisMoniList from "@/views/pages/hisTableList/hisMoniList";
  import hisKGList from "@/views/pages/hisTableList/hisKGList";
  import hisCalibList from "@/views/pages/hisTableList/hisCalibList";
  import hisFjAlarmList from "@/views/pages/hisTableList/hisFjAlarmList";
  import hisSensorList from "@/views/pages/hisTableList/hisSensorList";

  import hisQYDDList from "@/views/pages/hisTableList/hisQYDDList";
  import hisTBYAlarmList from "@/views/pages/hisTableList/hisTBYAlarmList";
  import hisHZYBAlarmList from "@/views/pages/hisTableList/hisHZYBAlarmList";
  import isBetween from "dayjs/plugin/isBetween";
  // 测点总览activeNum
  const currentRowId = ref(null)
  const activeNum = ref(0);
  let handleRightList = reactive([])
  let handleRightListold = reactive([{
      label: "测点总览",
      value: 1,
    },
    {
      label: "图表",
      value: 2,
      children: [{
          label: "历史曲线",
          value: 22,
          component: lishiquxian,
        },
        {
          label: "状态图",
          value: 23,
          component: zhuangtaitu,
        },
        {
          label: "柱状图",
          value: 24,
          component: barChart,
        },
      ],
    },
    {
      label: "查询",
      value: 3,
      children: [{
          label: "历史报警异常",
          value: 31,
          component: hisAlarmList,
        },
        {
          label: "历史断电异常",
          value: 32,
          component: hisCutList,
        },
        {
          label: "历史馈电异常",
          value: 33,
          component: hisFeedList,
        },
        {
          label: "模拟量历史数据",
          value: 34,
          component: hisMoniList,
        },
        {
          label: "开关量历史变动",
          value: 35,
          component: hisKGList,
        },
        {
          label: "历史标校",
          value: 36,
          component: hisCalibList,
        },
        {
          label: "历史分级报警",
          value: 37,
          component: hisFjAlarmList,
        },
        {
          label: "历史传感器故障",
          value: 38,
          component: hisSensorList,
        }
      ],
    },
  ]);
  // 中间列表右击事件
  function handleRightClick(row, column, event) {
    handleRightList = handleRightListold
    currentRowId.value = row.pointId
    activeNum.value = 0
    state.highlightedRow = row;
    if (row.pointId.includes("A") && !row.pointId.includes("V")) {
      let data = []
      handleRightListold.forEach(item => {
        if (item.value == 2) {
          item.children = [{
            label: "历史曲线",
            value: 22,
            component: lishiquxian,
          }]
        }
        if (item.value == 3) {
          item.children = [{
              label: "历史报警异常",
              value: 31,
              component: hisAlarmList,
            },
            {
              label: "历史断电异常",
              value: 32,
              component: hisCutList,
            },
            {
              label: "历史馈电异常",
              value: 33,
              component: hisFeedList,
            },
            {
              label: "模拟量历史数据",
              value: 34,
              component: hisMoniList,
            }, {
              label: "历史标校",
              value: 36,
              component: hisCalibList,
            },
            {
              label: "历史分级报警",
              value: 37,
              component: hisFjAlarmList,
            },
            {
              label: "历史传感器故障",
              value: 38,
              component: hisSensorList,
            },
            // 新增
            {
              label: "历史区域断电",
              value: 39,
              component: hisQYDDList,
            },
             {
              label: "历史突变预报警",
              value: 40,
              component: hisTBYAlarmList,
            },
            {
              label: "历史恒值报警",
              value: 41,
              component: hisHZYBAlarmList,
            }
          ]
        }
        data.push(item)
      })
      handleRightList = data
    } else if (row.pointId.includes("D") && !row.pointId.includes("V")) {
      let data = []
      handleRightListold.forEach(item => {
        if (item.value == 2) {
          item.children = [{
              label: "状态图",
              value: 23,
              component: zhuangtaitu,
            },
            {
              label: "柱状图",
              value: 24,
              component: barChart,
            },
          ]
        }
        if (item.value == 3) {
          item.children = [{
              label: "历史报警异常",
              value: 31,
              component: hisAlarmList,
            },
            {
              label: "历史断电异常",
              value: 32,
              component: hisCutList,
            },
            {
              label: "历史馈电异常",
              value: 33,
              component: hisFeedList,
            },
            {
              label: "开关量历史变动",
              value: 35,
              component: hisKGList,
            }, {
              label: "历史标校",
              value: 36,
              component: hisCalibList,
            },
            {
              label: "历史分级报警",
              value: 37,
              component: hisFjAlarmList,
            },
            {
              label: "历史传感器故障",
              value: 38,
              component: hisSensorList,
            }
          ]
        }
        data.push(item)
      })
      handleRightList = data
    } else if (row.pointId.includes("V")) {
      let data = []
      handleRightListold.forEach(item => {
        if (item.value != 2) {
          if (item.value == 3) {
            if (row.pointId.includes("D")) {
              item.children = [{
                  label: "历史报警异常",
                  value: 31,
                  component: hisAlarmList,
                },
                {
                  label: "开关量历史变动",
                  value: 35,
                  component: hisKGList,
                },
                {
                  label: "历史传感器故障",
                  value: 38,
                  component: hisSensorList,
                }
              ]
            }
            if (row.pointId.includes("A")) {
              item.children = [{
                  label: "历史报警异常",
                  value: 31,
                  component: hisAlarmList,
                },
                {
                  label: "模拟量历史数据",
                  value: 34,
                  component: hisMoniList,
                },
                {
                  label: "历史传感器故障",
                  value: 38,
                  component: hisSensorList,
                }
              ]
            }
          }
          data.push(item)
        }
      })
      handleRightList = data
    }
    state.fromIndexpointId = row;
    event.preventDefault(); // 阻止默认右键菜单
    state.handleRightSelectShow = true;
    nextTick(() => {
      state.handleRightSelect.x = event.pageX;
      state.handleRightSelect.y = event.pageY;
    });
  }
  // 过滤器
  function formatCloud(str) {
    return str.includes('A') ? 'A' : str.includes('D') ? 'D' : 'S'
  }
   function getbiaodashiList(id) {
        let arr = []
        axios.get('/template/expression/getExpressionVo/' + id).then(res => {
            let expressionList = res.data.expressionList.map(item => {
                return {
                    value: item,
                    obj: undefined
                }
            })

            for (let i = 0; i < expressionList.length; i++) {
                Object.keys(res.data.templateNodeMap).map(async item => {
                    if (expressionList[i].value == item) {
                        if (state.formData1.virtualPointMap) {
                            if (state.formData1.virtualPointMap != null) {
                                expressionList[i].value = state.formData1.virtualPointMap[item]
                                    .pointName
                                expressionList[i].obj = state.formData1.virtualPointMap[item]
                                expressionList[i].obj.code = state.formData1.virtualPointMap[item]
                                    .sensorId
                                let codeList = await getpointIdsListData(state
                                    .virtualPointMap[item]
                                    .sensorId)
                                expressionList[i].obj.codeList = codeList
                            }
                        } else {
                            expressionList[i].value = null
                            expressionList[i].value1 = res.data.templateNodeMap[item]
                                .name
                            expressionList[i].obj = res.data.templateNodeMap[item]
                            let codeList = await getpointIdsListData(res.data.templateNodeMap[item]
                                .code)
                            expressionList[i].obj.codeList = codeList
                        }
                    }
                })
            }
            state.expressionVoList = expressionList
          })
   }
  //获取普通测点详情数据
  function getponitdetailData(id) {
    let ponitdetailUrl = '/point/detail'
    if (id) {
      if (id.includes("M")) {
        ponitdetailUrl = '/point/detailMultiple'
      } else if (id.includes("V")) {
        ponitdetailUrl = 'point/detailVirtual'
      } else {
        ponitdetailUrl = '/point/detail'
      }
    }
    axios.get(ponitdetailUrl + `?pointId=` + id).then(res => {
      state.fromIndexpointId = res.data
      if (id.includes("M")) {
        state.fromIndexpointId.sensorId = Number(state.fromIndexpointId.sensorId)
        axios.get('/sensor/multiple/detail?id=' + state.fromIndexpointId.sensorId).then(res => {
          state.looksensorObj = res.data
        })
        let arr1 = state.fromIndexpointId.multiplePointBranchList
        state.mulactiveNamePoint = arr1[0].sensorId
        arr1.forEach(
          item => {
            item.baohanD = formatCloud(item.sensorId)
            if (item.cutValueList != null && item.cutValueList.length > 0) {
              item.cutValueList.forEach((item11, index11) => {
                item11.title = '断电配置'
                item11.name = (Number(index11) + 1)
                if (item11.cutStationList) {
                  if (item11.cutStationList.length > 0) {
                    item11.cutStationList.forEach(item3 => {
                      if (item3.controlPortList) {
                        if (item3.controlPortList.length > 0) {
                          let rrrr = []
                          let selectRowsId = []
                          item3.controlPortList.map(item4 => {
                            if (item4.selected ==
                              true) {
                              selectRowsId.push(
                                item4
                                .controlPort)
                              nextTick(() => {
                                item3
                                  .selectRowsId =
                                  selectRowsId
                              })
                              rrrr.push(item4)
                            }
                          })
                          item3.controlPortList = rrrr
                        }
                      }
                    })
                  }
                }
              })
            } else {
              item.cutValueList = [{
                name: 1,
                cutStationList: []
              }]
            }
            if (item.cutArea != null) {
              let areaIdList = item.cutArea.areaIdList.map(item3 => {
                return Number(item3)
              })
              item.cutArea.areaIdList = areaIdList
            } else {
              item.cutArea = {
                areaIdList: undefined,
                cutValue: undefined,
                resumeValue: undefined
              }
            }
            if (item.upGrandalarmBasic == null) {
              item.upGrandalarmBasic = {
                grandalarmRate: {},
              }
            }
            if (item.downGrandalarmBasic == null) {
              item.downGrandalarmBasic = {
                grandalarmRate: {},
              }
            }
          })
        state.fromIndexpointId.multiplePointBranchList = arr1
      } else {
        if (state.fromIndexpointId.pointType == 3) {
          getbiaodashiList(state.fromIndexpointId.templateId)
          if (state.fromIndexpointId.pointId.includes('D')) {
            state.baohanD = 'D'
          }
          state.virtualPointMap = state.fromIndexpointId.virtualPointMap
          state.virtualPointMapId = state.fromIndexpointId.templateId
        } else {
          state.baohanD = formatCloud(state.fromIndexpointId.sensorId)
        }
        if (state.fromIndexpointId.cutArea && state.fromIndexpointId.cutArea != null) {
          if (state.fromIndexpointId.cutArea.areaIdList) {
            if (state.fromIndexpointId.cutArea.areaIdList.length > 0) {
              state.fromIndexpointId.cutArea.areaIdList = state.fromIndexpointId.cutArea.areaIdList.map(
                item => {
                  return Number(item)
                })
            }
          }
        } else {
          state.fromIndexpointId.cutArea = {}
        }
        if (state.fromIndexpointId.upGrandalarmBasic == null) {
          state.fromIndexpointId.upGrandalarmBasic = {
            grandalarmRate: {
              thresholdValue: '',
              rateCycle: ''
            }
          }
        } else {
          if (state.fromIndexpointId.upGrandalarmBasic.grandalarmRate == null) {
            state.fromIndexpointId.upGrandalarmBasic.grandalarmRate = {
              thresholdValue: ''
            }
            state.fromIndexpointId.upGrandalarmBasic.grandalarmRate = {
              rateCycle: ''
            }
          }
        }
        if (state.fromIndexpointId.downGrandalarmBasic != null) {
          if (state.fromIndexpointId.downGrandalarmBasic.grandalarmRate == null) {
            state.fromIndexpointId.downGrandalarmBasic.grandalarmRate = {
              thresholdValue: ''
            }
            state.fromIndexpointId.downGrandalarmBasic.grandalarmRate = {
              rateCycle: ''
            }
          }
        } else {
          state.fromIndexpointId.downGrandalarmBasic = {
            grandalarmRate: {
              thresholdValue: '',
              rateCycle: ''
            }
          }
        }
        if (state.fromIndexpointId.hasUpGrandAlarm) {
          state.radio1 = '上限分级报警'
        }
        if (state.fromIndexpointId.cutValueList != null) {

          if (state.fromIndexpointId.cutValueList.length > 0) {
            if (state.cutValueListyou == true) {
              state.fromIndexpointId.cutValueList.forEach((item, index) => {
                item.cutStationList.forEach((item2, index2) => {
                  let selectRowsId = []
                  let arr = []
                  item2.controlPortList.forEach(item3 => {
                    if (item3.selected == true) {
                      selectRowsId.push(item3.controlPort)
                      nextTick(() => {
                        item2.selectRowsId =
                          selectRowsId
                      })
                      item3.stationCode = item2.stationCode
                      item3.stationPlaceName = item2
                        .stationPlaceName
                      arr.push(item3)
                    }
                  })
                  state.putongdescselectRowsId.push(selectRowsId)
                  item2.controlPortList = arr
                })
              })
            } else {
              state.fromIndexpointId.cutValueList.forEach((item, index) => {
                item.title = '断电配置'
                item.name = (index + 1)
              })
            }
          }
        } else {
          state.fromIndexpointId.cutValueList = [{
            name: 1,
            cutStationList: []
          }]
        }
      }
    })
  }

  function ponitactiveNameTabClick(type) {
    activeNum.value = type
  }

  function handleRightTabClick(val) {
    state.fromIndexpointId.fromIndexLabel = val.paneName;
    state.handleRightSelectList.forEach((item) => {
      if (val.paneName == item.label) {
        state.handleRightSelectCom = item.component;
      }
    });
  }
  // 请求接口
  // 报警统计
  function getsearchAlarmList() {
    axios
      .post("/point/searchAlarm", {
        startTime: state.ymdValue1 == 1 ?
          dayjs().format("YYYY-MM-DD 00:00:00") : state.ymdValue1 == 2 ?
          dayjs().subtract(1, "day").format("YYYY-MM-DD 00:00:00") : state.ymdValue1 == 3 ?
          dayjs().subtract(7, "day").format("YYYY-MM-DD 00:00:00") : dayjs().subtract(1, "month").format(
            "YYYY-MM-DD 00:00:00"),
        endTime: state.ymdValue1 == 1 ?
          dayjs().format("YYYY-MM-DD HH:mm:ss") : state.ymdValue1 == 2 ?
          dayjs().format("YYYY-MM-DD HH:mm:ss") : state.ymdValue1 == 3 ?
          dayjs().format("YYYY-MM-DD HH:mm:ss") : dayjs().format("YYYY-MM-DD HH:mm:ss"),
        pointId: state.fromIndexpointId.pointId,
      })
      .then((res) => {
        chartOnePoint = echarts.init(document.getElementById("chartOnePoint"));
        setC1(res.data);
      });
  }
  // 故障统计
  function getsearchFaultList() {
    axios
      .post("/point/searchFault", {
        startTime: state.ymdValue2 == 1 ?
          dayjs().format("YYYY-MM-DD 00:00:00") : state.ymdValue2 == 2 ?
          dayjs().subtract(1, "day").format("YYYY-MM-DD 00:00:00") : state.ymdValue2 == 3 ?
          dayjs().subtract(7, "day").format("YYYY-MM-DD 00:00:00") : dayjs().subtract(1, "month").format(
            "YYYY-MM-DD 00:00:00"),
        endTime: state.ymdValue2 == 1 ?
          dayjs().format("YYYY-MM-DD HH:mm:ss") : state.ymdValue2 == 2 ?
          dayjs().format("YYYY-MM-DD HH:mm:ss") : state.ymdValue2 == 3 ?
          dayjs().format("YYYY-MM-DD HH:mm:ss") : dayjs().format("YYYY-MM-DD HH:mm:ss"),
        pointId: state.fromIndexpointId.pointId,
      })
      .then((res) => {
        chartTwoPoint = echarts.init(document.getElementById("chartTwoPoint"));
        setC2(res.data);
      });
  }
  // 断电、馈电
  function getsearchCutList() {
    axios
      .post("/point/searchCut", {
        pointId: state.fromIndexpointId.pointId,
        type: state.ymdValue3,
      })
      .then((res) => {
        nextTick(() => {
          let arr = Object.keys(res.data.cutStaticMap).map((item) => {
            return state.ymdValue3 == "T" || state.ymdValue3 == "Y" ?
              dayjs(item).format("HH") :
              dayjs(item).format("DD");
          });
          chartThreePoint = echarts.init(
            document.getElementById("chartThreePoint")
          );
          setC3(arr, res.data.cutStaticMap, res.data.feedStaticMap);
        });
      });
  }

  function handleRightSelectBlur() {
    state.handleRightSelectShow = false;
  }

  function handleRightSelectChange(val) {
    state.handleRightSelectShow = false;
    state.handleRdrawerShow = true;
    state.handleRightSelectType = val;
    state.handleRightSelectValue =
      proxy.$refs["cascaderRightRef"].checkedNodes[0].label;
    state.fromIndexpointId.fromIndexLabel =
      proxy.$refs["cascaderRightRef"].checkedNodes[0].label;
    state.handleRightTabValue =
      proxy.$refs["cascaderRightRef"].checkedNodes[0].label;
    state.handleRightSelectLabel =
      proxy.$refs["cascaderRightRef"].checkedNodes[0].pathLabels[0];
    state.handleRightSelectCom =
      proxy.$refs["cascaderRightRef"].checkedNodes[0].data.component;
    if (state.handleRightSelectLabel == "图表") {
      state.handleRightSelectList = handleRightListold[1].children;
    } else if (state.handleRightSelectLabel == "查询") {
      state.handleRightSelectList = handleRightListold[2].children;
    } else {
      getsearchAlarmList();
      getsearchFaultList();
      getsearchCutList();
      state.baohanD = formatCloud(state.fromIndexpointId.pointId)
      state.mulpointTypeName = state.fromIndexpointId.pointId.includes('M') ? '多参' : ''
      getponitdetailData(state.fromIndexpointId.pointId)
    }
    let data=state.fromIndexpointId
    state.fromIndexpointId=data
  }
  // el-collapse-item阻止冒泡
  function stopCollapse(e) {
    return e.stopPropagation();
  }
  function closeChange(){
    state.fromIndexpointId=undefined
  }

  // 获取周日历
  function getWeeksAndDate(year, month) {
    var d = new Date();
    // 该月第一天
    d.setFullYear(year, month - 1, 1);
    var w1 = d.getDay();
    if (w1 == 0) w1 = 7;
    // 该月天数
    d.setFullYear(year, month, 0);
    var dd = d.getDate();
    // 第一个周一
    let d1;
    if (w1 != 1) d1 = 7 - w1 + 2;
    else d1 = 1;
    let week_count = Math.ceil((dd - d1 + 1) / 7); //每月有几周
    let weekList = [];
    for (var weekday = 1; weekday <= week_count; weekday++) {
      var monday = d1 + (weekday - 1) * 7;
      var sunday = monday + 6;
      var from = year + "-" + month + "-" + monday;
      var to;
      if (sunday <= dd) {
        to = year + "-" + month + "-" + sunday;
      } else {
        d.setFullYear(year, month - 1, sunday);
        let days = d.getDate();
        to = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + days;
      }
      dayjs.extend(isBetween);
      let tod = dayjs().format("YYYY-MM-DD");
      weekList.push({
        weekday: weekday,
        list: {
          from: from,
          to: to,
          show: dayjs(tod).isBetween(from, to, "day", "[)"),
        },
        dayList: [0, 1, 2, 3, 4, 5, 6].map((item) => {
          return dayjs(dayjs(from).add(item, "day")).format("YYYY-MM-DD");
        }),
      });
    }
    weekList.forEach((item) => {
      if (item.dayList.includes(dayjs().format("YYYY-MM-DD"))) {
        state.weekDayObj = item;
      }
    });
    return weekList;
  }
  getWeeksAndDate(dayjs().format("YYYY"), dayjs().format("MM"));
  async function selectDate(type) {
    // if(type == 'prev') {
    //     state.currentMonth = dayjs(state.currentMonth).subtract(1, 'month')
    //     state.weekList = await getWeeksAndDate(dayjs(state.currentMonth).format('YYYY'), dayjs(state.currentMonth).format(
    //         'MM'))
    // } else if (type == 'next') {
    //     state.currentMonth = dayjs(state.currentMonth).add(1, 'month')
    //     state.weekList = await getWeeksAndDate(dayjs(state.currentMonth).format('YYYY'), dayjs(state.currentMonth).format(
    //         'MM'))
    // }
  }
  // 报警统计
  let chartOnePoint;
  // 曲线
  function setC1(data) {
    var m2R2Data = [{
        value: data.grandAlarmNum,
        legendname: "分级报警",
        name: "分级报警  " + data.grandAlarmNum,
        itemStyle: {
          borderWidth: "2",
          borderColor: "#fff",
          borderRadius: 4,
          color: "rgba(255, 115, 115, 1)",
        },
      },
      {
        value: data.udAlarmNum,
        legendname: "上下限报警",
        name: "上下限报警  " + data.udAlarmNum,
        itemStyle: {
          borderWidth: "2",
          borderColor: "#fff",
          borderRadius: 4,
          color: "rgba(255, 153, 0, 1)",
        },
      },
      {
        value: data.constantAlarmNum,
        legendname: "恒值报警",
        name: "恒值报警  " + data.constantAlarmNum,
        itemStyle: {
          borderWidth: "2",
          borderColor: "#fff",
          borderRadius: 4,
          color: "rgba(255, 221, 51, 1)",
        },
      },
      {
        value: data.preAlarmNum,
        legendname: "预报警",
        name: "预报警 " + data.preAlarmNum,
        itemStyle: {
          borderWidth: "2",
          borderColor: "#fff",
          borderRadius: 4,
          color: "rgba(238, 102, 187, 1)",
        },
      },
    ];
    let option = {
      title: [{
        text: "报警总数",
        subtext: data.alarmTotal == 0 ? "0" : data.alarmTotal,
        textStyle: {
          fontSize: 14,
          color: "rgba(62, 70, 79, 1)",
        },
        subtextStyle: {
          fontSize: 20,
          color: "black",
        },
        textAlign: "center",
        x: "19%",
        y: "40%",
      }, ],
      tooltip: {
        trigger: "item",
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        left: "60%",
        align: "left",
        top: "middle",
        itemWidth: 10,
        itemHeight: 6,
        textStyle: {
          color: "rgba(62, 70, 79, 1)",
        },
      },
      series: [{
        type: "pie",
        center: ["20%", "50%"],
        radius: ["50%", "80%"],
        clockwise: false, //饼图的扇区是否是顺时针排布
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
          },
        },
        data: m2R2Data,
      }, ],
    };
    chartOnePoint.setOption(option, true);
  }
  let chartTwoPoint;

  function setC2(data) {
    var placeHolderStyle = {
      normal: {
        color: "rgba(124,228,245,0.2)",
      },
    };

    let option = {
      tooltip: {
        show: true,
        formatter: "{a}：{d}%",
      },
      legend: {
        orient: "",
        itemGap: 12,
        itemWidth: 10,
        itemHeight: 6,
        left: "60%",
        top: "center",
        textStyle: {
          color: "rgba(62, 70, 79, 1)",
        },
      },

      series: [{
          name: "环网故障",
          type: "pie",
          hoverAnimation: false, //鼠标移入变大
          clockWise: false,
          center: ["20%", "50%"],
          radius: ["75%", "90%"],
          itemStyle: {
            normal: {
              color: "rgba(255, 85, 85, 1)",
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },

          data: [{
              value: data.faultTotal == null ?
                100 : Number(data.faultTotal) - Number(data.networkFaultNum),
              name: "",
              itemStyle: placeHolderStyle,
            },
            {
              value: data.networkFaultNum == null ? 0 : data.networkFaultNum,
              name: "环网故障\t\t\t\t\t\t\t" +
                (data.networkFaultNum === null ?
                  "0" :
                  (
                    (Number(data.networkFaultNum) / Number(data.faultTotal)) *
                    100
                  ).toFixed(0) + "%"),
            },
          ],
        },
        {
          name: "分站故障",
          type: "pie",
          clockWise: false,
          center: ["20%", "50%"],
          hoverAnimation: false, //鼠标移入变大
          radius: ["55%", "70%"],
          itemStyle: {
            normal: {
              color: "rgba(255, 153, 0, 1)",
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          data: [{
              value: data.faultTotal == null ?
                100 : Number(data.faultTotal) - Number(data.stationFaultNum),
              name: "",
              itemStyle: placeHolderStyle,
            },
            {
              value: data.stationFaultNum == null ? 0 : data.stationFaultNum,
              name: "分站故障\t\t\t\t\t\t\t" +
                (data.stationFaultNum === null ?
                  "0" :
                  (
                    (Number(data.stationFaultNum) / Number(data.faultTotal)) *
                    100
                  ).toFixed(0) + "%"),
            },
          ],
        },
        {
          name: "传感器故障",
          type: "pie",
          clockWise: false,
          center: ["20%", "50%"],
          hoverAnimation: false, //鼠标移入变大
          radius: ["35%", "50%"],
          itemStyle: {
            normal: {
              color: "rgba(255, 221, 51, 1)",
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },

          data: [{
              value: data.faultTotal == null ?
                100 : Number(data.faultTotal) - Number(data.sensorFaultNum),
              name: "",
              itemStyle: placeHolderStyle,
            },
            {
              value: data.sensorFaultNum == null ? 0 : data.sensorFaultNum,
              name: "传感器故障\t\t\t\t" +
                (data.sensorFaultNum === null ?
                  "0" :
                  (
                    (Number(data.sensorFaultNum) / Number(data.faultTotal)) *
                    100
                  ).toFixed(0) + "%"),
            },
          ],
        },
      ],
    };
    chartTwoPoint.setOption(option, true);
  }
  let chartThreePoint;

  function setC3(xdata, data, datat) {
    const colorList = ["rgba(64, 158, 255, 1)", "rgba(84, 204, 146, 1)"];
    let option = {
      legend: {
        icon: "circle",
        top: "5%",
        right: "5%",
        itemWidth: 6,
        itemGap: 20,
        textStyle: {
          color: "#556677",
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          label: {
            show: true,
            backgroundColor: "#fff",
            color: "#556677",
            borderColor: "rgba(0,0,0,0)",
            shadowColor: "rgba(0,0,0,0)",
            shadowOffsetY: 0,
          },
          lineStyle: {
            width: 0,
          },
        },
        backgroundColor: "#fff",
        textStyle: {
          color: "#5c6c7c",
        },
        padding: [10, 10],
        extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
      },
      grid: {
        top: "15%",
        left: 20,
        right: 20,
        bottom: 30,
      },
      xAxis: [{
        type: "category",
        data: xdata,
        axisLine: {
          lineStyle: {
            color: "rgba(107,107,107,0.37)", //x轴颜色
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#999", //坐标轴字颜色
          },
          margin: 15,
        },
        boundaryGap: false,
      }, ],
      yAxis: [{
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(107,107,107,0.37)", //y轴颜色
          },
        },
        axisLabel: {
          textStyle: {
            color: "#999",
          },
        },
        splitLine: {
          show: false,
        },
      }, ],
      series: [{
          name: "断电",
          type: "line",
          data: Object.keys(data).map((item) => {
            return data[item];
          }),
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
          },
          itemStyle: {
            normal: {
              color: colorList[0],
              borderColor: colorList[0],
            },
          },
        },
        {
          name: "馈电",
          type: "line",
          data: Object.keys(datat).map((item) => {
            return datat[item];
          }),
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
          },
          itemStyle: {
            normal: {
              color: colorList[1],
              borderColor: colorList[1],
            },
          },
        },
      ],
    };
    chartThreePoint.setOption(option, true);
  }
  // 年月日切换
  function ymdClick(item, type) {
    if (type == 1) {
      state.ymdValue1 = item.type;
      getsearchAlarmList();
    } else if (type == 2) {
      state.ymdValue2 = item.type;
      getsearchFaultList();
    } else if (type == 3) {
      state.ymdValue3 = item.type;
      getsearchCutList();
    }
  }

  function elcascaderChange(val) {
    getPointData();
  }

  function statuscheckboxChange(val) {
    getPointData();
  }
  let ivt = null;
  onMounted(() => {
    setTimeout(() => {
      tableHeads.value = table_headers.homePointAllDetail;
    }, 200);
    getHomeTop();
    getArea();
    getStationData();
    getDevData();
    getPointData();
    getAlarmNum();
    ivt = setInterval(() => {
      getHomeTop();
      getArea();
      getStationData();
      getDevData();
      getPointData();
      getAlarmNum();
    }, userStore.titleValue.home_refresh);

    window.addEventListener("resize", () => {
      // 获取当前屏幕的宽度
      screenWidth.value = window.innerWidth;
    });
    if (isDark.value) {
      document
        .querySelector(":root")
        .style.setProperty("--el-bg-color-overlay", "#386c96");
      document
        .querySelector(":root")
        .style.setProperty("--el-fill-color-light", "rgba(91, 109, 128, 0.08)");
      document
        .querySelector(":root")
        .style.setProperty("--el-text-color-regular", "rgba(62, 70, 79, 1)");
    } else {
      document
        .querySelector(":root")
        .style.setProperty("--el-bg-color-overlay", "#fff");
      document
        .querySelector(":root")
        .style.setProperty("--el-fill-color-light", "#f5f7fa");
      document
        .querySelector(":root")
        .style.setProperty("--el-text-color-regular", "#606266");
    }
  });
  onBeforeUnmount(() => {
    clearInterval(ivt);
    window.addEventListener("resize", () => {
      // 获取当前屏幕的宽度
      screenWidth.value = window.innerWidth;
    });
    document
      .querySelector(":root")
      .style.setProperty("--el-bg-color-overlay", "#fff");
    document
      .querySelector(":root")
      .style.setProperty("--el-fill-color-light", "#f5f7fa");
    document
      .querySelector(":root")
      .style.setProperty("--el-text-color-regular", "#606266");
  });
  watch(
    () => isDark.value,
    () => {
      if (isDark.value) {
        document
          .querySelector(":root")
          .style.setProperty("--el-bg-color-overlay", "#386c96");
        document
          .querySelector(":root")
          .style.setProperty("--el-fill-color-light", "rgba(91, 109, 128, 0.08)");
        document
          .querySelector(":root")
          .style.setProperty("--el-text-color-regular", "rgba(62, 70, 79, 1)");
      } else {
        document
          .querySelector(":root")
          .style.setProperty("--el-bg-color-overlay", "#fff");
        document
          .querySelector(":root")
          .style.setProperty("--el-fill-color-light", "#f5f7fa");
        document
          .querySelector(":root")
          .style.setProperty("--el-text-color-regular", "#606266");
      }
    }
  );
</script>
<style scoped lang="scss">
  :deep(tbody tr:nth-child(2n)) {
    background: rgba(62, 70, 79, 0.04);
  }

  :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
    background: rgba(62, 70, 79, 0.04);
  }

  :deep(.highlight-column) {
    background: var(--primary-table-color) !important;
  }

  .detailcollapse {
    .el-collapse {
      border-top: none;
    }

    ::v-deep .el-collapse-item__header {
      padding: 10px 0;
      line-height: 18px;
      background-color: transparent;
      border-bottom: none;
    }
  }

  .cardTitle {
    width: 595px;
    display: flex;
  }

  .title_item {
    cursor: pointer;
    white-space: nowrap;
    padding: 5px 8px;
    text-align: center;
    border-radius: 2px;

    span {
      padding-left: 0;
    }
  }

  .active_title {
    background-color: rgba(64, 158, 255, 0.2);
    color: rgba(64, 158, 255, 1);
  }

  .pointAlarm {
    height: 223px;
    font-size: 14px;
    padding-bottom: 10px;
    overflow: auto;

    .title2 {
      color: #8b9095;
    }

    .text {
      color: #303133;
    }

    .alarmValue {
      display: flex;
      margin: 10px 0 0 0;

      div {
        margin: 0 10px 0 0;
      }
    }
  }

  .noBorderBox {
    border: none;

    :deep(.el-input__wrapper) {
      background: none;
    }
  }

  .parent-container {
    width: 300px;
    /* 固定宽度 */
    height: 200px;
    /* 固定高度 */
    position: relative;
    /* 添加相对定位 */
  }

  :deep(.stable-cascader) {
    position: absolute !important;
  }

  :deep(.el-tabs__item) {
    padding: 0 16px !important;
    background-color: rgba(91, 109, 128, 0.08);
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 0;
  }

  :deep(.el-tabs__item.is-active) {
    border-radius: 2px;
    background-color: rgb(68, 136, 255);
    color: #fff;
  }

  :deep(.el-tabs__nav-prev) {
    line-height: 30px !important;
  }

  :deep(.el-tabs__nav-next) {
    line-height: 30px !important;
  }

  :deep(.el-tabs__active-bar) {
    background-color: transparent;
  }

  :deep(.el-tabs) {
    --el-tabs-header-height: 27px;
  }

  :deep(.dragbox) {
    width: 75%;
    height: 72vh;
  }
  :deep(.hhhhh){
    height: 90% !important;
  }

  :deep(.querycss) {
    padding: 0;

    .el-switch {
      width: 100%;
    }
  }

  :deep(.titleType) {
    display: flex;
    justify-content: start !important;
    flex-direction: column;
    text-align: left;
    position: relative;
    .el-switch,
    .el-checkbox{
      width: 20%;
      position: absolute !important;
      right:42%;
      top:-7px;
    }
    .el-radio-group{
      width: 100%;
    }
    .el-button{
    margin-top: 10px;
    }

    .globalFontSize {
      float: left;
      width: 100%;
      text-align: left !important;
      margin-bottom: 5px;
    }
  }

  :deep(.shouqiquery),
  :deep(.querybox) {
    display: none;
  }

  :deep(.tipBox) {
    display: none;
  }

  :deep(.tabdiyBox span) {
    min-width: 108px;
  }

  :deep(.pagestyle) {
    padding: 12px 0 0 0;

    .cardBox {
      padding: 0;
      margin: 10px 0 0 0;
    }
  }

  /* 测点总览抽屉样式
   */
  .ymdBox {
    span {
      cursor: pointer;
      padding: 5px 8px;
      text-align: center;
      border-radius: 2px;

      &.active {
        background-color: rgba(64, 158, 255, 0.2);
        color: rgba(64, 158, 255, 1);
      }
    }
  }

  .bjBox {
    display: flex;
    justify-content: space-between;
    border: 1px solid rgba(240, 247, 255, 1);
    margin-bottom: 10px;

    .bgtw {
      flex: 1;
      background-color: rgba(240, 247, 255, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 14px;
    }

    span {
      display: block;
    }

    .t {
      color: rgba(62, 70, 79, 1);
      font-size: 20px;
      font-weight: 700;
    }

    .w {
      font-size: 12px;
      color: rgba(62, 70, 79, 0.6);
    }

    .bjState {
      margin: 10px 5px;
      color: rgba(230, 162, 60, 1);
      padding: 8px;
      background-color: rgba(230, 162, 60, 0.1);
      border-left: 2px solid rgba(230, 162, 60, 1);
    }
  }

  .pointDescBox {
    font-size: 14px;
    padding-bottom: 10px;

    .labelTop {
      margin-bottom: 5px;

      span {
        display: block;
        color: rgba(62, 70, 79, 1);
        margin: 5px 0;

        &:first-child {
          color: rgba(62, 70, 79, 0.6);
        }
      }
    }

    .boxImg {
      font-size: 12px;

      .imgState {
        position: relative;

        span {
          position: absolute;
          bottom: -12px;
          left: 50%;
          transform: translateX(-50%);
          background-color: #409eff;
          border-radius: 2px;
          padding: 2px;
          color: #fff;
        }
      }

      p {
        font-size: 12px;
        padding: 0;
        margin: 12px 0 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  :deep(.el-cascader-menu__wrap.el-scrollbar__wrap) {
    max-height: 246px;
    height: auto !important;
  }

  :deep(.el-table__body tr td:nth-child(1)) {
    padding-left: 4px;
  }

  :deep(.el-table__body tr td:last-child) {
    padding-right: 4px;
  }

  :deep(.el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before) {
    background-color: transparent;
  }

  .table {
    // :deep(.el-table--enable-row-hover .el-table__body tr:hover > td:nth-child(1)),
    // :deep(.el-table__body tr.current-row td:nth-child(1)) {
    //   border-left: 2px solid #409eff !important;
    //   border-radius: 4px 0 0 4px;
    // }

    // :deep(.el-table--enable-row-hover .el-table__body tr:hover > td),
    // :deep(.el-table__body tr.current-row td) {
    // background: rgba(68, 136, 255, 0.12);
    // }

    // :deep(.el-table--enable-row-hover .el-table__body tr:hover > td:last-child),
    // :deep(.el-table__body tr.current-row td:last-child) {
    //   border-right: 2px solid #409eff !important;
    //   border-radius: 0 4px 4px 0;
    // }
  }

  .pointInfo_box {

    :deep(.el-table--border .el-table__cell),
    :deep(.el-table--border th.el-table__cell) {
      border: none;
    }

    :deep(.el-table__body tr.current-row td:nth-child(1)),
    :deep(.el-table__body tr.current-row1 td:nth-child(1)) {
      border-left: 3px solid rgba(255, 85, 85, 1) !important;
      border-radius: 4px 0 0 4px;
      padding-left: 4px;
    }
    :deep(.el-table__body tr.current-row td:last-child),
    :deep(.el-table__body tr.current-row1 td:last-child) {
      border-right: 3px solid rgba(255, 85, 85, 1) !important;
      border-radius: 0 4px 4px 0;
    }
  }

  :deep(.el-table__body tr.selected-row td) {
    border-color: transparent;
    background-color: rgba(255, 85, 85, 0.12) !important;
  }
</style>
<style lang="scss" scoped>
  @import "@/assets/styles/page-edit.scss";

  .point_box2 {
    width: 77.4% !important;
  }

  .qeuick2 {
    width: 22% !important;
  }

  .table2 {
    width: 100% !important;
  }

  .pointInfo2 {
    width: 56.5% !important;
  }

  .pointInfo3 {
    width: 83.5% !important;
  }

  .substation2 {
    width: 22.5% !important;
  }

  .output2 {
    width: 19.7% !important;
  }

  // 深色样式
  .dark_point_box {
    background: url("/src/assets/images/home/bg2.png") !important;
  }

  .dark_quick {
    background: rgba(255, 255, 255, 0.8) !important;
  }

  .dark_bottom {
    .line {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .substation {
      background-color: rgba(255, 255, 255, 0.8) !important;
    }

    .pointInfo {
      background-color: rgba(255, 255, 255, 0.8) !important;
    }

    .output {
      background-color: rgba(255, 255, 255, 0.8) !important;
    }
  }

  ::v-deep .el-table .cell {
    padding: 0 !important;
  }



  .fontColor {
    color: #ff5555 !important;
  }

  .redStatus {
    background-color: #ff5555 !important;
  }

  .tabStyle {
    background-color: #e5eeff;
    border-radius: 50px;
    color: #4488ff;
    font-weight: 700;
  }

  // 过渡动画
  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.3s linear;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }

  .box {
    padding: 12px;
    width: 100%;
    height: 100%;
    overflow: auto;

    .top {
      width: 100%;
      height: 126px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      .point_box {
        padding: 12px;
        width: 66.7%;
        height: 100%;
        border-radius: 8px;
        background: url("/src/assets/images/home/bg.png");
        background-size: cover;
        display: flex;
        align-items: flex-end;
        background-repeat: no-repeat !important;

        .point_box_left {
          width: 27%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-size: 24px;
            color: rgba(55, 120, 204, 1);
            font-weight: 700;
          }

          .search_box {
            padding: 9px;
            width: 100%;
            height: 53px;
            border-radius: 6px;
            background: linear-gradient(180deg,
                rgba(227, 236, 255, 1) 0%,
                rgba(255, 255, 255, 0.72) 100%);
            display: flex;
            justify-content: space-between;
          }
        }

        .data_show {
          margin: 0 0 0 38px;
          width: 820px;
          height: 83px;
          display: flex;
          justify-content: space-between;

          .items {
            width: 169px;
            height: 100%;
            display: flex;
            align-items: center;

            img {
              width: 83px;
              height: 83px;
            }

            .items_num {
              // font-size: 14px;
              color: rgba(34, 68, 119, 1);
            }
          }
        }
      }

      .quick {
        padding: 12px;
        width: 32.781%;
        height: 114px;
        background-color: #f1f5fd;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .quick_head {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title {
            font-size: 16px;
            font-weight: 500;
            color: rgba(34, 68, 119, 1);
            display: flex;
            align-items: center;

            div {
              margin: 0 0 0 4px;
            }
          }
        }

        .quick_box {
          height: 56px;
          display: flex;
          justify-content: flex-start;

          .items {
            flex: 1;
            height: 56px;
            font-size: 12px;
            color: rgba(34, 68, 119, 1);
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            margin: 0 5px;
            white-space: nowrap;

            .img {
              width: 32px;
              height: 32px;
              background-color: #fff;
              border-radius: 6px;
              display: flex;
              align-items: center;
              justify-content: center;

              .bi-svg {
                margin-right: 0;
              }
            }
          }

          .items:hover {
            cursor: pointer;
          }
        }
      }
    }

    .bottom {
      .zk_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #2a84eb;
        position: absolute;
        top: 55%;
        left: 0;
        z-index: 99;

        .search-icon {
          color: #fff !important;
        }
      }

      .title {
        font-size: 16px;
        font-weight: 700;
        color: rgba(34, 68, 119, 1);
        display: flex;
        align-items: center;

        div {
          margin: 0 0 0 4px;
        }
      }

      .line {
        margin: 3px 0 10px 0;
        width: 100%;
        height: 1px;
        background-color: rgba(34, 68, 119, 0.1);
      }

      margin: 12px 0 0 0;
      width: 100%;
      height: calc(100% - 138px);
      display: flex;
      justify-content: space-between;

      // background: #000;
      .substation {
        width: 24.5%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 8px;

        .substation_head {
          padding: 12px;
          display: flex;
          justify-content: space-between;

          .title {
            align-items: flex-end;
          }
        }

        .select_box {
          padding: 0 13px;
          margin: 0 0 12px 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          color: rgba(34, 68, 119, 1);
        }

        .table {
          padding: 0 12px;
          height: calc(100% - 120px);
        }
      }

      .pointInfo {
        width: 58.5%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 8px;
        position: relative;
        transition: width 0.3s linear;

        .alarmNum {
          // bottom: 20px;
          // left: 10px;
          // position: absolute;
          display: flex;

          .num {
            margin-right: 16px;
            white-space: nowrap;

            span {
              margin-left: 4px;
              color: #ff5555;
            }
          }
        }

        .pointInfo_head {
          padding: 9px 12px;
          display: flex;
          justify-content: space-between;

          .btns {
            width: 327px;
            height: 30px;
            font-size: 14px;
            color: rgba(34, 68, 119, 1);
            display: flex;
            justify-content: space-between;

            .btn_item {
              width: 88px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50px;
            }
          }

          .imgs {
            display: flex;
            align-items: center;
          }

          .btns:hover {
            cursor: pointer;
          }
        }

        .pointInfo_box {
          padding: 0 12px;
          width: 100%;
          height: calc(100% - 140px);
          display: flex;
          justify-content: space-between;

          .table {
            // width: 49.57%;
            height: 100%;
          }
        }

        .pages {
          // position: absolute;
          // bottom: 20px;
          // right: 10px;
        }
      }

      .output {
        width: 15.7%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 8px;

        .output_head {
          padding: 12px;
        }

        .output_box {
          padding: 0 12px;
          height: calc(100% - 72px);
          overflow-y: auto;
          overflow-x: hidden;

          .items {
            padding: 8px;
            margin: 0 0 12px 0;
            // height: 124px;
            background: rgba(68, 136, 255, 0.12);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 14px;

            .items_name {
              // font-size: 14px;
              color: rgba(34, 68, 119, 1);
              display: flex;
              justify-content: space-between;

              .state {
                // font-size: 12px;
                color: rgba(0, 186, 173, 1);
                display: flex;
                align-items: center;

                .point {
                  margin: 0 4px 0 0;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background: rgba(0, 186, 173, 1);
                }
              }
            }

            .location {
              margin-top: 4px;
              padding: 12px;
              width: 100%;
              // height: 40px;
              background-color: rgba(255, 255, 255, 0.6);
              box-shadow: 4px 0px 16px rgba(34, 87, 188, 0.04);
              border-radius: 4px;
              // font-size: 14px;
              color: rgba(34, 68, 119, 1);
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .l_titile {
                display: flex;
                align-items: center;

                img {
                  margin-right: 4px;
                }
              }

              .l_info {
                width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
</style>